highcharts 动态绘图线

Question

我遇到一个问题，如何动态更新（在 YAxis 上）的情节线？具体来说，我需要计算图表一段时间的最大值、最小值和平均值，然后设置它们所代表的 3 条线。我怎样才能做到这一点？ 非常感谢！

Answer 1

这是一个关于如何动态更新情节线的非常简单的示例。

• 它有一个数据系列，只需按一下按钮即可更新。
• 当按下第二个按钮时，情节线将根据系列数据添加或删除+重绘。
• 如果您想使用数据点的子集，请随意使用函数getKPIByData，或更改data 参数。

http://jsfiddle.net/hsL4pwsh/12/

;$(function() {
    var curActiveData = 1;
    var addedPlotlines = false;
    var data1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
    var data2 = [31.9, 73.5, 117.4, 29.2, 109.0, 181.0, 212.6, 137.5, 225.4, 199.1, 91.6, 11.4];
    var getKPIByData = function(data) {
        function getMaxOfArray(numArray) {
            return Math.max.apply(null, numArray);
        }
        function getMinOfArray(numArray) {
            return Math.min.apply(null, numArray);
        }
        var minRate,
            maxRate = 0,
            rate,
            i,
            avgRate,
            totalRate = 0;
        for (i = 0; i < data.length; i++) {
            totalRate += data[i];
        }
        return {
            minRate: getMinOfArray(data),
            maxRate: getMaxOfArray(data),
            avgRate: totalRate / data.length
        };
    };
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        series: [{
            data: data1
        }]
    });
    // the button action
    var $button1 = $('#addPlotlines'),
        $button2 = $('#updatePlotlines'),
        chart = $('#container').highcharts();
    $button1.on("click", function() {
        var curData = [];
        for (var i = 0; i < chart.series[0].data.length; i++) {
            curData[curData.length] = chart.series[0].data[i].y;
        }
        var result = getKPIByData(curData);
        if (addedPlotlines) {
            chart.yAxis[0].removePlotLine('min');
            chart.yAxis[0].removePlotLine('max');
            chart.yAxis[0].removePlotLine('avg');
        }
        chart.yAxis[0].addPlotLine({
            color: 'green',
            width: 2,
            id: "min",
            value: result.minRate
        });
        chart.yAxis[0].addPlotLine({
            color: 'red',
            width: 2,
            id: "max",
            value: result.maxRate
        });
        chart.yAxis[0].addPlotLine({
            color: 'blue',
            width: 2,
            id: "avg",
            value: result.avgRate
        });
        addedPlotlines = true;
    });
    $button2.on("click", function() {
        var newActive = (curActiveData == 1) ? 2 : 1;
        console.log(newActive);
        chart.series[0].update({
            data: (newActive == 1) ? data1 : data2
        });
        curActiveData = newActive;
    });
});