Question

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

任何人都可以帮助我实现这一目标。

Answer 1

我把测试放在一起，看起来效果很好。

我更新了load事件以添加第二个系列，使用相同的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);
            }
        }

小提琴：

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

Answer 2

你可以试试这个：

series: [{
        name: 'Random data',
        marker : {
                enabled : false,
                lineWidth: 0,
                radius: 0
            },
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]

它的作品。

格雷格。

如何仅显示highcharts上的最后一点，该点应该与图表线一起移动？

2 个答案: