使用 chart.js 删除数据时如何解决类型错误？

Question

我正在使用 chart.js 制作一个简单的图表。制作图表没有问题，但现在我已经为每个 the documentation 添加了一个删除数据功能，但我遇到了类型错误。我想这是因为我错误地访问了数据

错误如下，我将 link 一个 JS fiddle 文件，这样您就可以看到所有内容，而无需我倾倒在文字墙中。

"main.js:49 未捕获类型错误：无法读取未定义的属性（读取 'labels'）"

我的理解是，由于范围问题，此错误往往会弹出，但我已经在全局范围内定义了数据，因此该函数应该能够访问它。我还认为我访问它可能是错误的，因为它有一些嵌套数组，所以我尝试 btn.onclick = removeData(chart[0]); 访问图表对象中的第一项（数据变量）但是产生了与上面类似的错误，但是将 'data' 换成了 'labels'。感谢任何 help/input!

JSFiddle of chart

Answer 1

首先你没有把图表放在一个变量中，所以你没有办法用它做事。第二部分，您没有将函数传递给 onclick 而是执行它并将结果放入 onClick。

文档中描述的方式仅在您将图表变量传递给函数并且不使用按钮时才有效。

此外，您使用的是 chart.js 的非常过时的版本，其语法是最新的。您要么需要更新版本，要么使用 V2 docs

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [
    {
      label: "Dataset #1",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [65, 59, 20, 81, 56, 55, 40],
    },
  ],
};

var options = {
  maintainAspectRatio: false,
};

const chart = new Chart("chart", {
  type: "pie",
  options: options,
  data: data,
});

function removeData() {
  chart.data.labels.pop();
  chart.data.datasets.forEach((dataset) => {
    dataset.data.pop();
  });
  chart.update();
}

let btn = document.createElement("button");
btn.innerHTML = "Remove data";
btn.onclick = removeData;
document.body.appendChild(btn);

body {
  background: #1d1f20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Chart.js tutorial</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</body>

</html>

使用 chart.js 删除数据时如何解决类型错误？

How to address type errors when removing data with chart.js?

javascript

arrays

chart.js