javascript - 遍历 Chart.js 数据字段中的数组

Question

更新:

var voltagedata1 = [];
    batterybank1.forEach(function(element){
        var voltage = {x: element.timestamp, y:element.voltage};
        voltagedata1.push(voltage);
})

data: voltagedata1

<小时/>我想在 Chart.js 图表的数据字段中迭代一个数组。

此代码的工作原理例如:

data: [
    {x: '2019-08-12 09:40:15', y:4}, {x: '2019-08-13 09:40:15', y:5}, {x: '2019-08-14 09:40:15', y:6},
],

然后尝试按如下方式迭代数组:

batterybank1.forEach(function(element){
    console.log(element)
    "{x:\'element.timestamp', y:element.voltage},"
})

console.log(element) 给出了正确的输出，但是图表没有更新...在控制台上我没有收到任何警告/错误 - 只是图表不输出。

下面的方法也不起作用，只输出console.log，但图表没有更新。

batterybank1.forEach(function(element){
    console.log(element)
    "{x:\'2019-08-12 09:40:15', 1},"
})

Answer 1

the documentation中有解释，您一次将一个点添加到图表中，如下所示:

batterybank1.forEach(function(element){
       chart.data.datasets[0].data.push(element);
})

这是假设element与data中的点的格式相同。

之后您需要调用chart.update();来显示新数据。

下面是一个工作示例:

let data = [{t: '2019-08-12 09:40:15', y:4}, {t: '2019-08-13 09:40:15', y:5}, {t: '2019-08-14 09:40:15', y:6}, {t: '2019-08-15 09:40:15', y:7}];

var chart = new Chart(document.getElementById('cht'), { type:'bar', data:
{
  datasets:[{
	label: 'CHRT - Chart.js Corporation',
	backgroundColor: '#ff0000',
  borderColor: '#ff0000',
  type: 'bar',
	pointRadius: 0,
	fill: false,
	lineTension: 0,
	borderWidth: 2,
  data: data}]
}, options:{
        scales: {
            xAxes: [
            {
              type: 'time',
						  distribution: 'series',
						  ticks: 
              {
							  source: 'data',
							  autoSkip: true
						  }
            }]
        }
    } });
    
document.getElementById('addPoints').addEventListener('click', function() {
      let extra = [{t: '2019-08-16 09:40:15', y:4}, {t: '2019-08-17 09:40:15', y:5}, {t: '2019-08-18 09:40:15', y:6}, {t: '2019-08-19 09:40:15', y:7}];
      extra.forEach(p =>
      {
        chart.data.datasets[0].data.push(p);
      });
      
      chart.update();
		});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

<button id="addPoints">Add Points</button>

<canvas id="cht" class="chartjs" width="770" height="385" style="display: block; width: 770px; height: 385px;">