javascript - 使用按钮切换 Highcharts 绘图线

Question

大家下午好，

只是一个非常快速的:我想知道是否可以切换 PlotLine(开/关)，而不必删除它，然后必须从头开始添加它。原因是我正在从 PHP 数组构建图表，并且只能在加载图表时定义一次绘图线值。

当我尝试从其 ID 添加情节线时，它失败了。

var hasPlotLine = true 
        $button = $('#button'),
        chart = $('#container').highcharts();

    $button.click(function() {
        if (!hasPlotLine) {
            chart.yAxis[0].addPlotLine('hello');
            $button.html('Remove');
        } else {
            chart.yAxis[0].removePlotLine('hello');
            $button.html('5-day average');
        }
        hasPlotLine = !hasPlotLine;
    });

请看看我的 fiddle : http://jsfiddle.net/Guill84/3ApbR/

另外:是否有可能获得 highcharts 来直接给出最近五天的平均值？那么最后五个数据点的平均值......然后为我绘制线条？这可能会让我解决这个问题......

爱你们所有人，感谢你们的帮助。

G.

Answer 1

您可以将您的 php 回显到 JavaScript 变量中，以便您可以在需要时添加它。

但是，对于您的最后一个问题，您可以轻松地从图表中获取最后 5 个数据点，计算平均值并绘制它。

示例:

http://jsfiddle.net/jlbriggs/HZ88T/

相关代码:

...
},function(chart) {
    var lData = chart.series[0].data.slice(-5);
    var points = [];
    $.each(lData,function(i, point) {
        points.push(point.y);
    });
    var avg = mean(points);
    var options = {
        value:avg,
        width:1,
        color:'#c00',
        label: {
            align:'right',
            textAlign:'left',
            y: 2,
            text: '5 Day Avg: '+ avg,
            style: {
                fontSize:'9px'
            }
        }
    };
    chart.yAxis[0].addPlotBand(options);
});
//----------------------------------------
function mean(arr) {
    if(typeof arr != 'undefined') {
        var sum = 0;
        $.each(arr,function(i,v) {
            sum += v;
        });
        return sum / arr.length;
    }
    return false;       
}