javascript - 如何在 Highcharts 上仅显示最后一个点并且该点应随图表线移动？

Question

我有一个面积图，其中有一个动态点将添加到图表中。我得到了这个 http://jsfiddle.net/rjpjwve0/ 但看起来该点首先显示，然后在延迟后图表退回。现在我想显示最后一个点，它将是一个动画点，它应该与图表一起移动，而不会延迟渲染。

有人可以帮助我实现这一目标吗？

Answer 1

我做了一个测试，看起来效果很好。

我更新了加载事件以添加第二个系列，使用相同的 series.data[len -1] 值；然后在 setInterval 部分，我们在每次迭代时更新该新点。

这样，通过更新现有标记而不是销毁一个标记并创建另一个标记，动画就可以按预期工作。

代码:

        events: {
            load: function () {
              var series  = this.series[0],
                  len     = series.data.length;

              //-------------------------------------
              //added this part ->
              this.addSeries({
                id: 'end point',
                type: 'scatter',
                marker: {
                    enabled:true,
                  symbol:'circle',
                  radius:5,
                  fillColor:'white',
                  lineColor: 'black',
                  lineWidth:2
                },
                data: [[
                  series.data[len - 1].x,
                  series.data[len - 1].y
                ]]
              }); 
              var series2 = this.get('end point');
              //-------------------------------------

              setInterval(function () {
                var x   = (new Date()).getTime(),
                    y   = Math.random();
                    len = series.data.length;
                series.addPoint([x,y], true, true);
                //and added this line -->
                series2.data[0].update([x,y]);
              }, 1000);
            }
        }

fiddle :

• http://jsfiddle.net/jlbriggs/a6pshutt/