Question

对于Highcharts，我试图用以下代码动态地向Scatterplot追加一个点：

chart.series[0].addPoint(50 * (i % 3), true, false);

但是，上面的代码存在两个问题。

通过上面这个设置，我可以追加新的点而不会让我的旧点消失 - 这正是我想要的。但是，当我追加越来越多的积分时，旧点不会从图表中“移开”。

从图表中移除旧点的解决方案是：

chart.series[0].addPoint(50 * (i % 3), true, true);

但是，这不允许我保留图表上的最新点 - 它会在添加新点时立即删除所有旧点。

有没有办法，我如何动态地向散点图添加更多点，保留最近的点数，但是转移旧的点？

http://jsfiddle.net/bluechips23/2ztfbn3w/

编辑：新回复中的解决方案

Answer 1

不是在开头加载随机数据，而是可以在addPoint()函数中设置一个子句，只有在系列中已有一定数量的数据点时才会移位。

类似的东西：

(chart.series[0].data.length >= minData ? true : false)

示例：

http://jsfiddle.net/jlbriggs/2ztfbn3w/4/

Answer 2

<强>解

所以，我解决了这个问题，解决方案非常简单。

执行chart.series[0].addPoint([x,y], true, true)时，它会将最新坐标移动一个点，同时将最新坐标附加到结尾。它就像一个数组 - 更具体地说，这是堆栈：chart.series[0].data.y，其中新点通过.addPoint添加到末尾，最旧的点被移位。

当堆栈为空时，当您执行.addPoint时，它只会添加最近的坐标。下次.addPoint运行时，它会添加一个新坐标并弹出最旧的坐标。

为了防止删除先前的坐标，这个想法很简单 - 只需在初始化图表时添加一串坐标。这可以简单地完成：

series: [
            {
                type:'scatter',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        myDate = new Date(),
                        time = (new Date()).getTime(),
                        i;
                    var counter = 0;
                    for (var i = -5; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 5000,
                            y: -10,
                        });
                        counter++;
                    }
                    return data;
                }())
            }
    ]

这里我只是添加6个点，x坐标为最后30秒的6个值，间隔为5秒，y坐标仅为-10。

这样，当使用chart.series[0].addPoint(50 * (i % 3), true, true);添加新坐标时，堆栈顶部的最旧坐标将被删除，而较新的坐标仍会显示在图表上。

显然，我们不希望以-10为值显示Y坐标。所以在yAxis上，我们定义了一个min: 0，它没有显示y = -10坐标。

这样才能解决所有问题。

Highcharts：永久动态地向Scatterplot添加一个点

2 个答案: