动态绘制标记在highcharts最后一点(Dynamically draw marker on l

2019-06-25 13:41发布

我想提请在最后点的标记。 数据源是动态的。 看一看下面的代码

$(function() {

    $("#btn").click(function() {
        var l = chart.series[0].points.length;
        var p = chart.series[0].points[l - 1];
        p.marker = {
            symbol: 'square',
            fillColor: "#A0F",
            lineColor: "A0F0",
            radius: 5
        };
        a = 1;
        chart.series[0].points[l - 1] = p;
        chart.redraw(false);

    });



    var ix = 13;
    var a = 0;

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                load: function() {
                    var series = this.series[0];
                    setInterval(function() {
                        ix++;
                        var vv = 500 + Math.round(Math.random() * 40);
                        chart.series[0].data[0].remove();
                        var v;
                        if (a == 1) v = {
                            y: vv,
                            x: ix,
                            marker: {
                                symbol: 'square',
                                fillColor: "#A0F",
                                lineColor: "A0F0",
                                radius: 5
                            }
                        }
                        else v = {
                            y: vv,
                            x: ix
                        }

                        a = 0;

                        series.addPoint(v);
                    }, 1500);
                }
            }
        },
        plotOptions: {
            series: {}
        },

        series: [{
            data: [500, 510, 540, 537, 510, 540, 537, 500, 510, 540, 537, 510, 540, 537]}]
    });
});

http://jsfiddle.net/9zNUP/

在按钮单击事件我想借鉴其已添加到图表最后点标记。

有没有办法做到这一点??

Answer 1:

 $("#btn").click(function() {
    var l = chart.series[0].points.length;
    var p = chart.series[0].points[l - 1];
    p.update({
        marker: {
            symbol: 'square',
            fillColor: "#A0F",
            lineColor: "A0F0",
            radius: 5
        }
    });
    a = 1;

});

解决方案@ http://jsfiddle.net/jugal/zJZSx/

还整理了您的代码一点,在结尾处增加一个前除去去除点的,highcharts支持它内置与所述第三参数去addPoint为真,表示换档系列,它去除了第一点,然后添加指定的点。

我真的不明白的一个VV等人,但我也没有打扰不到多少。 我觉得这就够根据你的要求了。



文章来源: Dynamically draw marker on last point in highcharts