Highcharts：如何在Ajax調用中更新Plotoptions pointStart？

Question

我的MVC Web應用程序中有一個簡單的圖表。 現在，我有了一些過濾器，這些過濾器將在其click事件上更新圖表。 實際上，單擊事件將使用ajax調用來更新圖表。

這是我的圖表：

 $('#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: 50, 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: '{series.name}'
    },
    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: myIssueResolvedStartDate,
            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 } } }
    }]
});

現在在我的ajax調用中，我執行以下操作來更新圖表：

var chart = $('#performance-cart').highcharts();
chart.options.plotOptions.series.pointStart = newDate; \\newDate = 1404086400000
chart.series[0].setData(issue, true);
chart.series[1].setData(resolve, true);

問題是， chart.options.plotOptions.series.pointStart = newDate; 不會更新pointStart。 我檢查了newDate變量中的值，並以UTC格式顯示了完美的日期。 系列數據正在完美更新。

我相信我在語法上寫錯了，或者為pointStart編寫了一些東西。 如果有人可以指出問題，我將不勝感激。

Answer 1

您無法實時更新plotOptions （也許有一些技巧，但是我們沒有為此提供官方API方法）。 但是，您可以更新每個系列，如下所示：

var chart = $('#performance-cart').highcharts();
chart.series[0].update({
    data: issue,
    pointStart: newDate
}, true);
chart.series[1].update({
    data: resolve,
    pointStart: newDate
}, true);