Question

ChartJS 没有更新

2020-02-28

849

javascript chart.js

我遇到了 ChartJS 问题（或者说是我的愚蠢）。我创建了一个小提琴来显示该问题。

下面是该问题的确切 JSFiddle：

var ctx = document.getElementById('somechart').getContext('2d');
var somechart = new Chart(ctx, {
  type: 'line',
  options: {
    title: {
      display: true,
      text: 'Custom Chart Title'
    }
  },
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45]
    }],

  },

});

somechart.options.title.text = 'new title';
somechart.config.data.datasets.data[2] = 5000;
somechart.update();

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="somechart"></canvas>

我试图在图表渲染后更新它。但是我收到了控制台错误

Uncaught TypeError: Cannot read property 'title' of undefined at window.onload

编辑：变量名称不匹配，我已修复此问题。仍然收到错误“jquery.min.js:2 Uncaught TypeError：无法在 HTMLDocument 中设置未定义的属性‘2’。”

Answer 1

似乎有几个问题：

变量 somechart 不存在，您将其命名为 chart
如果您注销图表，您将看到 chart.config.data.datasets.data[2] = 5000; 将不起作用，因为数据集是一个数组，因此您可以像这样访问它： chart.config.data.datasets[0].data[2] = 5000;

这是一个添加了上述修复的新小提琴： https://jsfiddle.net/8whzsLgp/

Answer 2

您使用了错误的变量来更新内容，请将 somechart 替换为 chart ，因为您已经初始化图表变量

var chart = new Chart

https://drive.google.com/uc?id=1QTdQsZqGMnmNZ2LrCed_yIWUQbg4hO5s

更新您的代码如下

chart.options.title.text = 'new title';
chart.config.data.datasets[0].data[2] = 5000;
chart.update();

您需要指定数据集的索引才能更新数据。

Answer 3

您的图表变量名为 chart ，但您尝试通过 somechart 访问它，但该变量并不存在。将变量 somechart 更改为 chart 。