在highcharts中的最后一个点动态绘制标记 [英] Dynamically draw marker on last point in highcharts

问题描述

我想在最后一个点上绘制标记。数据源是动态的。
查看下列代码

I want to draw a marker on the last point. Data source is dynamic. Have a look at following code

$(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/

按钮点击事件我尝试在已添加到图表的最后一点上绘制标记。

On button click event I am trying to draw marker on last point which is already added to chart.

有办法吗？

推荐答案

 $("#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为true，这表示移位系列，它删除第一点，然后添加给定的点。

Also tidied up your code a little, removed the removal of point before adding one at the end, highcharts supports it inbuilt with the third param to addPoint as true, which denotes shift series, which removes first point and then adds the given point.

理解什么是一个vv等是，但很好，我没有打扰很多。我认为这是基于你要求的。

I didn't really understand what the a vv etc were, but well i didn't bother much either. I think this is enough based on what you asked for.

这篇关于在highcharts中的最后一个点动态绘制标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！