HighCharts Dynamic multiseries柱状图一次只显示一组系列

本文介绍了HighCharts Dynamic multiseries柱状图一次只显示一组系列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我在一个项目中使用了highcharts，我在创建动态生成一个柱状图的多个数据更新系列时遇到了麻烦，我的目标是让所有系列保持在静态位置并根据数据进行更改。 直到现在我已经达到了这个目标： https://jsfiddle.net/jk05qcq4 p> Highcharts.chart（'container'，{ chart：{ type：'column'， backgroundColor：null，动画：Highcharts.svg，//不要在旧的IE 中动画marginRight：10， events：{ load：function（）{ var iter = 0; //设置每秒更新图表 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 = Obj ect.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'< b>'+ this.series.name +'< / b>< br /> ;'+ Highcharts.dateFormat（'％Y-％m-％d％H：％M：％S'，this.x）+'< br />'+ Highcharts。 numberFormat（this.y，4）; } }，图例：{已启用：true }，导出：{已启用：false } ， rangeSelector：{启用：false }， 导航器：{启用：false }，滚动条：{ enabled：false }， series：[{ name：'R data'， data：（function （）{ //生成一个随机数据数组 var data = []， time =（new Date（））。getTime（），i; （i = -19; i data.push（{x：time + i * 1000，y：BleedEnthalpy }）; } 返回数据; }（））}，{名称：'Bypass ratio'， maxPointWidth ：90， data：（function（）{ //产生一个随机数据数组 var data = []， time =（new Date（））。getTime （），i; （i = -19; i&l t; = 0; i + = 1）{ data.push（{ x：time + i * 1000， y：BypassRatio }）; } 返回数据; }（））}， {名称：'CorrCoreSpeed'， data :(函数（）{ //生成随机数据数组 var data = []， time =（new Date（））。getTime（），i; 对于（i = -19; i data.push（{x：time + i * 1000，y：CorrCoreSpeed } ）; } 返回数据; }（））}， {名称：'CorrFanSpeed'， data：（function（）{ //产生随机数据数组 var data = []， time =（new Date（））。getTime（），i; for（i = -19; i data.push（{x：time + i * 1000，y：CorrFanSpeed ））; } 返回数据; }（））}， { name：' FuelFlowRatio'， data：（function（）{ // gen创建一个随机数据数组 var data = []， time =（new Date（））。getTime（）， i; （$ = $ 19; i }）; } 返回数据; }（））}， {名称：'HPCOutletTemp'， data :(函数（）{ //生成随机数据阵列 var data = []， time =（new Date（））。getTime（），i; for（i = -19; i data.push（{x：time + i * 1000，y：HPCOutletTemp }）; } 返回数据; }（））} $ b] }）; 解决方案我通过缩小for从所有系列的 -19 到 0 循环： 名称：'HPCOutletTemp'， data :(函数（）{ //产生一个随机数据数组$对于（i = 0;i≤0），b $ b var data = []， time =（new Date（））.getTime（），i; ; i + = 1）{ data.push（{x：time + i * 1000，y：HPCOutletTemp }）; } return数据; }（））} 检查小提琴以获得更多理解： https://jsfiddle.net/qkdwu3p3/ I am using highcharts on a project, I am having trouble with the creation of multiple series of data updating dynamically generating a column chart, my aim is to keep all the series at a static position and change according to the data.Till now i have achieved this : 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 '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 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; }()) } ]}); 解决方案 I solved the answer by reducing the size of the for loop from -19 to 0 for all the series:{ 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; }()) }check the fiddle for more understanding : https://jsfiddle.net/qkdwu3p3/ 这篇关于HighCharts Dynamic multiseries柱状图一次只显示一组系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！