时间戳

首页 > 解决方案 > 如何将两个数组相乘并动态绘制到 HighCharts 中？

javascript - 如何将两个数组相乘并动态绘制到 HighCharts 中？

问题描述

JavaScript 新手。我正在尝试使用一个已经绘制的系列乘以另一个已经绘制的系列在 Highcharts 中制作一个新系列。如何添加具有自己 y 轴的新系列？我正在使用一些我自己没有完成的基本代码。

ChartOptions.Series[index].data保存一个数组数组：例如：[1563480488000, 12.144] 将是系列中每个数据点的时间戳和数据值。

所以我想要这样的东西： [1563480488000, 12.144] * [1563480488000, 1.0] = [1563480488000, 12.144]

那是 12.144*1.0，并且时间戳被保留。

dynamicChartnew Highcharts.StockChart(chartOptions)与我正在使用的代码片段相距甚远。我试过下面的代码。

 var voltSeries = chartOptions.series[0].data;
 var ampSeries = chartOptions.series[1].data;
 var wattSeries = [];
 for(var i = 0; i <= voltSeries.length; i++){
    var valu = chartOptions.series[1].data[i,1]*chartOptions.series[0].data[i,1];
    wattSeries[i,1] = valu;
    wattSeries[i,0] = valu;

}
  eval('window.console && console.log(voltSeries)');
  eval('window.console && console.log(wattSeries)');
   dynamicChart.addSeries({
       name: 'Watts',
       data: wattSeries 
    });
dynamicChart.redraw();

wattSeries 的输出是 (2) [NaN, NaN] 的数组，但它应该是时间戳和相乘的值。似乎无论我做什么我都无法绘制它。

标签： javascripthighcharts

解决方案

问题是从数组中错误地获取值。对于嵌套数组，您应该使用几个括号：array[x][x]

var dynamicChart = Highcharts.chart('container', chartOptions);

var voltSeries = chartOptions.series[0].data,
    ampSeries = chartOptions.series[1].data,
    wattSeries = [],
    valu;

for (var i = 0; i < voltSeries.length; i++) {
    valu = voltSeries[i][1] * ampSeries[i][1];

    wattSeries.push([ampSeries[i][0], valu]);
}

dynamicChart.addSeries({
    name: 'Watts',
    data: wattSeries,
    yAxis: 1
});

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

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

推荐阅读