时间戳

首页 > 解决方案 > 创建了一个 onclick 函数以从 ChartsJs 中的折线图中删除数据，但出现“无法读取未定义的属性‘数据’”错误

javascript - 创建了一个 onclick 函数以从 ChartsJs 中的折线图中删除数据，但出现“无法读取未定义的属性‘数据’”错误

问题描述

我能够使用静态数据创建折线图。现在，我正在尝试创建一个 onclick 函数，当您单击该函数时，所有静态数据都将从图表中删除。我遵循了chartsjs的文档，但不幸的是它不起作用。我收到以下错误： 无法读取未定义的属性“数据”。我觉得这很奇怪，因为我的数据定义如下。

这是我第一次使用图表和chartsjs，因此非常感谢任何指导。谢谢你。

这是我在 JSFiddle 上的演示

在我的 html 中，我添加了 onclick，而您可以看到我的 removeData 函数。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="line-chart" width="800" height="450"></canvas>
<button onclick="removeData()">Remove Data</button>

这是我的JS。你可以看到我的 removeData 函数。

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Jonnies Pizza",
        borderColor: "#3e95cd",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Pizza Sales Worldwide'
    }
  }
});



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

标签： javascriptchart.jslinechart

解决方案

问题是您的removeData()函数需要一个chart对象，但您没有在button onClick.

您可以按如下方式更改代码，它将起作用。

const chart = new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Jonnies Pizza",
        borderColor: "#3e95cd",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Pizza Sales Worldwide'
    }
  }
});      

function removeData() {
    chart.data.labels.pop();
    chart.data.datasets[0].data.pop();
    chart.update();
}

请查看您修改后的JSFiddle。

推荐阅读