Question

我在我的页面中使用多个高清图表，我使用addpoint函数来更新图表。问题是在一段时间后，图表将被压缩到不到原始图表大小的一半。我抓住了我的屏幕，可以在这里找到以解决问题： http://www.screenr.com/f3E7

示例图生成代码：

$(function () {
                          $(document).ready(function() {
                          Highcharts.setOptions({
                          global: {
                          useUTC: false
                          }
                          });
                          //var chart;
                          chart = new Highcharts.Chart({
                          chart: {
                          renderTo: 'ch_trafficio',
                          type: 'spline',
                          marginRight: 10,
                          events: {
                          load: function() {
                          // set up the updating of the chart each second
                          var series = this.series[0];
                          var series1= this.series[1];
                          }
                          }
                          },
                          title: {
                          text: ''
                          },
                          xAxis: {
                          type: 'datetime',
                          tickPixelInterval: 150
                          },
                          yAxis: {
                          title: {
                          text: 'Value'
                          },
                          plotLines: [{
                          value: 0,
                          width: 1,
                          color: '#808080'
                          }]
                          },
                          tooltip: {
                          formatter: function() {
                          return '<b>'+ this.series.name +'</b><br/>'+
                          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                          Highcharts.numberFormat(this.y, 2);
                          }
                          },
                          plotOptions : {
                            area : {
                              lineWidth : 1,
                              marker : {
                                enabled : false,
                                states : {
                                  hover : {
                                    enabled : true,
                                    radius : 5
                                  }
                                }
                              },
                              shadow : false,
                              states : {
                                hover : {
                                  lineWidth : 1
                                }
                              }
                            }
                          },
                          legend: {
                          enabled: true
                          },
                          exporting: {
                          enabled: true
                          },
                          series: [{
                          name: 'InBound',
                          type : "area",
                          color: '#89A54E',
                          data: (function() {
                          // generate an array of random data
                          var data = [],
                          time = (new Date()).getTime(),
                          i;
                          for (i = -119; i <= 0; i++) {
                          data.push({
                          x: time + i * 1000,
                          y: Math.random()
                          });
                          }
                          return data;
                          })()
                          },{
                           name: 'OutBound',
                           type : "area",
                           color: '#AA4643',

                           data: (function() {
                          // generate an array of random data
                          var data = [],
                          time = (new Date()).getTime(),
                          i;
                          for (i = -119; i <= 0; i++) {
                          data.push({
                          x: time + i * 1000,
                          y: Math.random()
                          });
                          }
                          return data;
                          })()
                           }
                          ]
                          });

图表更新功能：

chart.series[0].addPoint([x,data.oid1], false, true);
chart.series[1].addPoint([x,data.oid2], true, true);
chart1.series[0].addPoint([x,data.oid5], true, true);
chart2.series[0].addPoint([x,data.oid3], false, true);
chart2.series[1].addPoint([x,data.oid4], true, true);
chart3.series[0].addPoint([x,data.oid7], true, true);

提前致谢

Answer 1

你需要为你的点添加一个移动参数来移动图表

var series = chart.series[0],
shift = series.data.length > 100; // shift if the series is longer than 100

并更改下面的添加点

chart.series[0].addPoint([x,data.oid1], true, shift);

示例here

highchart autoupdate（addpoint）导致损坏的图表视图

1 个答案: