时间戳

首页 > 解决方案 > 使用多个事件仅渲染一次图表：Highcharts

javascript - 使用多个事件仅渲染一次图表：Highcharts

问题描述

所以我所拥有的是一个图表，其中我有一个事件函数，它可以为多个集合加载数据。

假设我有 3000 个点的数据。第一个数据集呈现前 1000 个点，之后第二个数据集呈现 2000 个点。

我为此调用了我的“事件”函数。

但是问题出现了，在显示前 1000 组数据之后。图表从头开始。我不想要那个。

这就是为什么我需要一个解决方案，以便我的 Highchart 的图表只呈现一次并且事件函数连续加载。

这是我的 Highchart 的 js 的片段

Highcharts.chart("chartcontainer", { // make thsi chart load only once.
                chart: {
                    type: 'line',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,


//Load this event function as the data updates
 events: {
                        load: function() {

                            var series = this.series[0],
                                chart = this;

                            setInterval(function() {

                      //some logic regarding the chart
                       //..
                        v = {
                                                y: y,
                                                x: x
                                            };

                    console.log("V value", v);
                    series.addSeries(v, false, true);
                    counter++;
                    localcounter++;                                 
                }   else
                {

                    oldcounter=counter;
                    flagToreload=1;
                                    }
                            }, 1000/130);

                            setInterval(function() {
                                chart.redraw(false);
                            }, 100);
                        }
                    }
                },

                time: {
                    useUTC: false
                },

                title: {
                    text: 'Live random data'
                },
                xAxis: {

                    type: 'Value',

                    gridLineWidth: 1

                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }],
                    gridLineWidth: 1
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br/>',
                    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
                },
                exporting: {
                    enabled: false
                },
                series: [{
                    animation: false,
                    name: 'Random data',
                    data: (function() {
                        // generate an array of random data
                        var data = [],
                            time = counter,
                            i;

                        for (i = -1000; i <= 0; i += 1) {
                            data.push([
                                counter,
                                null
                        ]);


                        }
                        return data;
                    }())
                }]
            });

标签： javascripthighcharts

解决方案

您可以使用：

  • addPoint方法：
chart: {
    events: {
        load: function() {
            var newData,
                chart = this,
                series = chart.series[0];

            setInterval(function() {
                newData = getRandomData();

                newData.forEach(function(el) {
                    series.addPoint(el, false);
                });

                chart.redraw();

            }, 2000);
        }
    }
}

现场演示：http: //jsfiddle.net/BlackLabel/2a8qswhf/

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

  • setData方法：
chart: {
    events: {
        load: function() {
            var newData,
                chart = this,
                combinedData,
                series = chart.series[0];

            setInterval(function() {
                newData = getRandomData();

                combinedData = series.userOptions.data.concat(newData);

                series.setData(combinedData);
            }, 2000);
        }
    }
}

现场演示：http: //jsfiddle.net/BlackLabel/Lmsk8yw9/

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

推荐阅读