Highcharts如何僅在x軸的值大於0時進行繪圖？

Question

伙計們，我有一個簡單的圖表，它顯示了每天的問題數量和已解決的問題數量。 圖表的開始日期是從當前日期開始的-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 } } }
    }]
}); 

這種方法有可能嗎？ 如果是這樣，我想要一些指針。 我已經搜索了高級圖表的官方文檔，但無法從中獲得任何幫助。

Answer 1

最簡單的方法是預處理您的數據，以便myIssueData滿足您的要求。 您尚未說明用於生成數據的內容，因此答案取決於您的數據源。 對於基於SQL的查詢，您可以查詢最近的非0發布日期，然后使用該日期作為查詢的起點。 偽代碼：

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 。 這不能解決問題計數超過0超過三十天的情況，但是在這種情況下，您可以跳過此查詢，並使用從今天date 30天前的直接查詢date 。