使用 chartjs 绘制图表，无法正常工作

Question

我正在使用 chart.js@2.9.4/dist/Chart.min.js。

我有一个对象数组 (data)，如下所示：

(4) […]
​
0: Object { Num: "5", "Label1": "6,342", "Label2": "3,051", … }
​
1: Object { Num: "6", "Label3": "6,247", "Label4": "3,042", … }

这个数组有 9 个对象。我有另一个数组 (xLabels)，其中包含 9 个 Y 轴条目。

任何帮助将不胜感激！

这是我的代码现在的样子：

    for(i=1 ; i < Object.keys(data[0].length; i++) {
       datasets.push( {
            str = Object.entries(data[1])[i][1]
            label: Object.entries(data[1])[i][0],
            data: parseFloat(str.replace(/,/g, '.'))
        })
     }

new Chart(ctx, {
      type: 'line',

    datasets: [
      {
        labels: tLabels,
        data: datasets,
      }],
}

Answer 1

用这个替换你的 for 循环：

data.forEach((dataObject) => {
    const data = Object.values(dataObject)
    const label = data.shift()
    data.map((entry) => (parseFloat(entry.toString().replace(/,/g, '.'))))
    datasets.push({
        label,
        data
    })
});

还有你的新图表：

new Chart(ctx, {
  type: 'line',
  data: {
    labels: xLabels,
    datasets
  }
})

控制台中发生的事情的示例：