使用按钮切换Highcharts plotLine

时间:2014-03-14 15:45:45

标签: javascript jquery highcharts highstock

大家下午好,

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

当我尝试从其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;
    });

请看看我的小提琴: http://jsfiddle.net/Guill84/3ApbR/

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

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

-G。

2 个答案:

答案 0 :(得分:2)

您可以将您的php回显为javascript变量,以便您可以在需要时添加它。

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

example

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;       
}

答案 1 :(得分:1)

为什么不在最初将php数组加载到js数组中,然后随时随地使用此变量?

$(function () {
    //create attribute array
    var attr = {
                id: 'hello',
                value: 60,
                width: 1,
                color: 'red',
                dashStyle: 'dash',
                label: {
                    text: '5-day average',
                    align: 'left',
                    y: 10,
                    x: 0
                }
            }
 . . .

http://jsfiddle.net/3ApbR/2/