在 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.

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

Is there a way to do that??

推荐答案

 $("#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.

我真的不明白 a 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屋！