Highcharts 样条每秒更新

Question

我发现 Highcharts Spline 在示例中每秒更新一次。 https://www.highcharts.com/demo/highcharts/dynamic-update

但是在这个例子中只有一个数据数组。我尝试将此示例应用于多个数组，但遇到了以下问题。前10次图表更新顺利。第10个数字是指定的数组最大长度，克服它后，图上最旧的点将被删除。所以，10次之后，只有最近的数组被顺利绘制，前2个立即出现，没有动画。我想这是因为最后一个点将被写入哪个数组。

我尝试使用setData()代替addPoint，但结果并没有更好。

我的例子：https://jsfiddle.net/krouvy/Lptgkod0/5/

    const onChartLoad = function () {
        const chart = this,
            series = chart.series,
            data = []

        for (let i = -19; i <= 0; i += 1) {
            data.push({
                x: null,
                y: null
            })
        }

        chart.addSeries({
            name: "Random data1",
            lineWidth: 2,
            color: Highcharts.getOptions().colors[2],
            data: data,
            animation: {
                duration: 1,
            }
        })
        chart.addSeries({
            name: "Random data2",
            lineWidth: 2,
            color: "red",
            data: data,
            animation: {
                duration: 1,
            }
        })
        chart.addSeries({
            name: "Random data3",
            lineWidth: 2,
            color: "blue",
            data: data,
            animation: {
                duration: 1,
            }
        })

        let interval = setInterval(function () {

            const x =  new Date().getTime(),
                  y = Math.random()


            series[0].addPoint([x, y], true, true)
            series[1].addPoint([x, y], true, true)
            series[2].addPoint([x, y], true, true)

        }, 1000)
    }

// Plugin to add a pulsating marker on add point
    Highcharts.addEvent(Highcharts.Series, "addPoint", e => {
        const point = e.point,
            series = e.target

        if (!series.pulse) {
            series.pulse = series.chart.renderer.circle()
                .add(series.markerGroup)
        }

        setTimeout(() => {
            series.pulse
                .attr({
                    x: series.xAxis.toPixels(point.x, true),
                    y: series.yAxis.toPixels(point.y, true),
                    r: series.options.marker.radius,
                    opacity: 1,
                    fill: series.color
                })
                .animate({
                    r: 20,
                    opacity: 0
                }, {
                    duration: 1000
                })
        }, 1)
    })



    Highcharts.chart("container", {
        accessibility: {
            enabled: false
        },
        chart: {
            backgroundColor: "#252734",
            type: "spline",
            events: {
                load: onChartLoad
            }
        },
        time: {
            useUTC: false
        },
        title: {
            text: "Live random data",
            style: {
                color: "#FFF"
            }
        },
        xAxis: {
            type: "datetime",
            tickPixelInterval: 150,
            maxPadding: 0.1,
            lineColor: "#FFF",
            labels: {
                style: {
                    color: "#FFF",
                    fontWeight: 400,
                    fontSize: "13px"
                }
            },
        },
        yAxis: {
            title: {
                text: "values",
                style: {
                    color: "#FFF",
                    fontWeight: 400,
                    fontSize: "13px"
                }
            },
            labels: {
                style: {
                    color: "#FFF",
                    fontWeight: 400,
                    fontSize: "13px"
                }
            },
            plotLines: [{value: 0, width: 1, color: "#808080"}]
        },
        tooltip: {
            headerFormat: "<b>{series.name}</b><br/>",
            pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        },
        legend: {
            itemStyle: {
                color: "#FFF",
                fill: "#FFF",
                fontWeight: 700,
                fontSize: "12px",
                fontFamily: `Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif`,
            }
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
    })

我正在尝试实现图表上所有线条外观的平滑动画，如单条线条的 Highcharts 示例中所示。我可以毫无问题地显示图表或向其添加第二行。唯一的问题是数组达到最大长度后缺乏平滑度。

Answer 1

那是因为您在每次

addPoint

调用后都会重新绘制图表。每个间隔只需执行一次就足够了。

  let interval = setInterval(function() {
    const x = new Date().getTime(),
      y = Math.random();

    series[0].addPoint([x, y], false, true);
    series[1].addPoint([x, y], false, true);
    series[2].addPoint([x, y], true, true);
  }, 1000)

---

现场演示：https://jsfiddle.net/BlackLabel/vdg1yqho/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Series#addPoint