Question

我无法找到以下我认为最好用示例描述的答案：

我将雷达图数据中的一个值从6更改为10，而其他值保持不变。如果我现在以非零动画时间触发更新，它将重新绘制图表，同时每个值从零开始。我希望动画只对变化进行动画处理，即将相关属性从6移到10。有可能吗？

Answer 1

是的。有可能的。这取决于您如何更新图表选项。参见chartjs documentations

要更新选项，请支持在适当位置更改options属性或传入新的options对象。



如果将选项进行适当的突变，则会保留其他选项属性，包括由Chart.js计算的属性。



如果将其创建为新对象，就像使用选项创建新图表一样-旧选项将被丢弃。

Answer 2

下面是显示图表更新而不重绘的示例。运行该代码段，然后按一下“更新”按钮，以使数据点b每次增加1。

let myChart = new Chart(document.getElementById('chart'), {
  type: 'radar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
      label: 'series1',
      data: [0, 2, 7, 10, 3]
    }]
  },
  options: {
    maintainAspectRatio: false
  }
});

document.getElementById('update').addEventListener('click', function() {
  myChart.data.datasets[0].data[1] += 1;
  myChart.update();
});

<button id="update">Update!</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

Chart.js雷达图的更新动画

2 个答案: