更新 Charts

在创建图表后更新图表是非常常见的。图表数据更改后，Chart.js 将动画显示新的数据值。

添加或移除数据

通过更改数据数组来支持添加和删除数据。要添加数据，只需将数据添加到数据数组中，如本例所示。

  1. function addData(chart, label, data) {
  2.     chart.data.labels.push(label);
  3.     chart.data.datasets.forEach(dataset => {
  4.         dataset.data.push(data);
  5.     });
  6.     chart.update();
  7. }
  9. function removeData(chart) {
  10.     chart.data.labels.pop();
  11.     chart.data.datasets.forEach(dataset => {
  12.         dataset.data.pop();
  13.     });
  14.     chart.update();
  15. }

更新选项

更新选项支持选择已有选择属性或传递新选项对象。

  • 如果选项发生了变化，则会保留其他选项属性，包括由Chart.js计算的选项属性。
  • 如果创建为新对象 - 旧选项将被丢弃。
  1. function updateConfigByMutating(chart) {
  2.     chart.options.title.text = 'new title';
  3.     chart.update();
  4. }
  6. function updateConfigAsNewObject(chart) {
  7.     chart.options = {
  8.         responsive: true,
  9.         title:{
  10.             display:true,
  11.             text: 'Chart.js'
  12.         },
  13.         scales: {
  14.             xAxes: [{
  15.                 display: true
  16.             }],
  17.             yAxes: [{
  18.                 display: true
  19.             }]
  20.         }
  21.     }
  22.     chart.update();
  23. }

可以单独更新比例尺而不更改其他选项。要更新比例，请传入包含所有定制的对象，包括那些不变的数据。

使用新的id或更改后的type更新比例后，引用chart.scales中的任何一个的变量将会丢失。

  1. function updateScales(chart) {
  2.     var xScale = chart.scales['x-axis-0'];
  3.     var yScale = chart.scales['y-axis-0'];
  4.     chart.options.scales = {
  5.         xAxes: [{
  6.             id: 'newId',
  7.             display: true
  8.         }],
  9.         yAxes: [{
  10.             display: true,
  11.             type: 'logarithmic'
  12.         }]
  13.     }
  14.     chart.update();
  15.     // need to update the reference
  16.     xScale = chart.scales['newId'];
  17.     yScale = chart.scales['y-axis-0'];
  18. }

你也可以通过指定其索引或ID来更新特定比例。

  1. function updateScale(chart) {
  2.     chart.options.scales.yAxes[0] = {
  3.         type: 'logarithmic'
  4.     }
  5.     chart.update();
  6. }

用于更新选项的代码示例可以在toggle-scale-type.html中找到。

阻止动画

有时当图表更新时，您可能不需要动画。为此，你可以设置update 的持续时间为 0.这将会同步渲染图表，而不需要动画。