Highcharts如何仅在x轴的值大于0时绘制

Highcharts how to only plot if x axis is having value greater than 0?

本文关键字：大于 0时 绘制 何仅 Highcharts      更新时间：2023-09-26

伙计们，我有一个简单的高图表，显示问题的数量和每天解决的问题的数量。图表的开始日期是当前日期的-30天。因此，它将始终显示每30天的数据。

现在我要做的是动态地从x轴上的数据大于0的位置开始绘制图表。

例如，如果29天的问题/解决计数为0，在第30天的问题计数增加到1，我想从第30天开始图表，以此类推。

这是我的图表代码

$('#performance-cart').highcharts({
    chart: {
        type: 'area', backgroundColor: '#f5f7f7', style: { fontFamily: 'Roboto, Sans-serif', color: '#aeafb1' },
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        }
    },
    xAxis: {
        type: 'datetime',
        labels: { style: { color: '#aeafb1' } }
    },
    yAxis: {
        min: 0, max: maxVal, tickInterval: 10, gridLineColor: '#ebeded', gridLineWidth: 1,
        title: { text: '' }, lineWidth: 0, labels: { align: 'right', style: { color: '#aeafb1' } }
    },
    title: { text: '' },
    tooltip: {
        useHTML: true, headerFormat: '<h3 style="color:#ffffff;font-weight:300;padding: 3px 12px;">{point.y:,.1f}</br>',
        backgroundColor: '#515757', pointFormat: 'Issues</h3>'//$('#performanceColumnChart').data('tooltip')
    },
    legend: {
        itemStyle: { color: '#838589' }, symbolWidth: 12, symbolHeight: 5, itemWidth: 80, symbolRadius: 0,
        itemMarginBottom: 10, backgroundColor: '#f5f7f7', verticalAlign: 'top', borderWidth: 0, x: -498, y: 10
    },
    plotOptions: {
        area: {
            fillOpacity: 0.2, cursor: 'pointer', marker: {
                symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null,
                allowPointSelect: true
            }
        },
        line: {
            fillOpacity: 0.2, cursor: 'pointer', marker: {
                symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null,
                allowPointSelect: true
            }
        },
        column: {
            fillOpacity: 0.2, cursor: 'pointer', marker: {
                symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null,
                allowPointSelect: true
            }
        },
        series: {
            pointStart: myDateVariable,
            pointInterval: 24 * 3600 * 1000 // one day
        }
    },
    series: [{
        name: 'Issues', color: '#ff3806',
        data: myIssueData,
        marker: { states: { hover: { fillColor: '#ff3806', lineColor: '#ffffff', lineWidth: 2 } } }
    }, {
        name: 'Resolved', color: '#1da9dd',
        data: myResolvedData,
        marker: { states: { hover: { fillColor: '#1da9dd', lineColor: '#ffffff', lineWidth: 2 } } }
    }]
});

这种方法可能吗?如果是的话，我想要一些建议。我搜索了高排名的官方文件，但没有得到任何帮助。

最简单的方法是预处理您的数据，使myIssueData满足您的要求。您没有说明使用什么来生成数据，因此答案将取决于您的数据源。对于基于sql的，您可以查询最近的非0发行日期，然后使用该日期作为查询的起点。Psuedo-code: 

DECLARE @startDate AS datetime
SELECT @startDate = MAX(date)
FROM myIssuesTable
WHERE issueCountColumn > 0
SELECT date, issueCountColumn
FROM myIssuesTable
WHERE date >= @startDate
ORDER BY date ASC

第二个查询的结果成为您的myIssueData。这并不包括问题数超过30天大于0的情况，但在这种情况下，您可以跳过此查询，并使用从今天起30天前的date直接查询。

相关文章：