Javascript Chartjs无法读取未定义的属性数据集

我正在开发一个React应用程序，并试图让Chartjs从其npm包中导入后正常工作。以下是初始化代码：

//in my constructor
this.usageChart = null;

//in componentDidMount
let chartContext = document.getElementById("proc_usage");
let initialDataIdle = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
let initialDataOther = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

console.log("Creating chart");
this.usageChart = new Chart(chartContext, {
  type: "line",
  data: {
    datasets: [
      { label: "User", fill: true, data: initialDataOther, backgroundColor: "rgba(244, 143, 177, 0.8)" },
      { label: "System", fill: true, data: initialDataOther, backgroundColor: "rgba(255, 235, 59, 0.8)" },
      { label: "IRQ", fill: true, data: initialDataOther, backgroundColor: "rgba(100, 181, 246, 0.8)" },
      { label: "Idle", fill: true, data: initialDataIdle, backgroundColor: "rgba(150, 150, 150, 0.4)" }
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    },
    plugins: {
      stacked100: { enable: true }
    }
  }
});
console.log("Chart created: " + this.usageChart.data);

问题是当我尝试更新图表时，

this.usageChart.data

未定义。实际上，在初始化期间的最后一个

console.log（）

调用中，它也是未定义的。我看不出我做错了什么。我正在加载一个插件，它允许绘制一个折线图，在折线图之间用面积表示百分比。我不知道这个插件是否是问题所在，但我没有发现任何关于它的错误，代码或多或少是从插件的示例代码中逐字提取的

以下是我更新图表的代码：

//from componentDidUpdate
usages['User'] = userUsage;
usages['System'] = sysUsage;
usages['IRQ'] = irqUsage;
usages['Idle'] = idleUsage;

console.log("updating chart");
this.usageChart.data.datasets.forEach((dataset) => {
  dataset.data.shift();
  dataset.data.push(usages[dataset.label]);
});
this.usageChart.update();
console.log("chart updated");

我确实为您创建了一个（我只是将您的代码复制到自定义组件中），在我的案例中没有错误

我认为这里有错误，因为您的图表没有正确更新：

this.usageChart.data.datasets.forEach((dataset) => {
  dataset.data.shift();
  dataset.data.push(usages[dataset.label]);
});

更正版本：

您错误地更新了数据集：

this.usageChart.data.datasets.forEach((dataset) => {
  dataset.data.shift();
  dataset.data = usages[dataset.label];
});

---

请检查工作并与您的项目进行比较

结果是我使用了错误的npm包

---

请注意，有人已经用过时的、陈旧的github回购协议在这个名字上坐了2年了。真正的包名是。非常烦人。

创建图表时，“chartContext”变量的值正确吗？@Talavera是，将其打印到

控制台。日志

显示它是

HTMLCanvasElement

可能是因为该插件？@Talavera我对该插件进行了注释，但仍然是相同的错误。您在JS控制台中看到任何错误吗？谢谢。原来问题出在软件包上，但您的小提琴应该是一个有用的指南。