HighCharts动态多重邮件柱形图一次只显示一组系列

我在一个项目上使用highcharts，我在创建多个数据更新动态生成柱形图时遇到问题，我的目标是将所有系列保持在静态位置并根据数据进行更改。 直到现在我已经实现了这个目标： https ： //jsfiddle.net/jk05qcq4/

Highcharts.chart('container', { chart: { type: 'column', backgroundColor: null, animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function() { var iter = 0; // set up the updating of the chart each second var series = this.series[0]; var series2 = this.series[1]; var series3 = this.series[2]; var series4 = this.series[3]; var series5 = this.series[4]; var series6 = this.series[5]; myInterval = setInterval(function() { var len = Object.keys(BleedEnthalpy).length; var len2 = Object.keys(BypassRatio).length, x = new Date().getTime(); if (iter < len) { series.addPoint([x, BleedEnthalpy[iter]], false, true); series2.addPoint([x, BypassRatio[iter]], false, true); series3.addPoint([x, CorrCoreSpeed[iter]], false, true); series4.addPoint([x, CorrFanSpeed[iter]], false, true); series5.addPoint([x, FuelFlowRatio[iter]], false, true); series6.addPoint([x, HPCOutletTemp[iter]], true, true); iter++; } else { clearInterval(myInterval); } }, 1000); } } }, title: { text: null }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: [{ title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, { }], tooltip: { formatter: function() { return '' + this.series.name + '
' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' + Highcharts.numberFormat(this.y, 4); } }, legend: { enabled: true }, exporting: { enabled: false }, rangeSelector: { enabled: false }, navigator: { enabled: false }, scrollbar: { enabled: false }, series: [{ name: 'R data', 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: BleedEnthalpy }); } return data; }()) }, { name: 'Bypass ratio', maxPointWidth: 90, 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: BypassRatio }); } return data; }()) }, { name: 'CorrCoreSpeed', 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: CorrCoreSpeed }); } return data; }()) }, { name: 'CorrFanSpeed', 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: CorrFanSpeed }); } return data; }()) }, { name: 'FuelFlowRatio', 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: FuelFlowRatio }); } return data; }()) }, { name: 'HPCOutletTemp', 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: HPCOutletTemp }); } return data; }()) } ] }); 

Answer 1

我通过将所有系列的for循环的大小从-19减小到0来解决了这个问题：

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

检查小提琴以获得更多理解： https ： //jsfiddle.net/qkdwu3p3/