ChartJs在每次角度刷新数据时都有动画

Question

我有可变数量的图表要用ChartJ显示。

因此，基本上，我听取了一个可观察到的(可能会改变数据甚至趋势的数量(：

<div *ngIf="adapterTrends | async as trends">
<div *ngFor="let trend of trends" class="grid">
<div class="col-2">{{ trend.label }}</div>
<div class="col-2">{{ trend.lastValue }}</div>
<div class="col-8">
<p-chart type="line" [data]="trend" [options]="options"></p-chart>
</div>
</div>
</div>

(顺便说一句，预计我有几张折线图，而不是一张有几条线的图(

我的问题是，每次刷新数据时，我都会得到初始动画(其中的线从底部升起(。通过在[options]对象中将options.animation设置为false，我成功地完全禁用了动画。

但是，有没有办法让这两组数据之间的转换动画化呢？

Answer 1

在图表组件中，当数据发生变化时，您可以在图表实例上调用destroy()并重新创建整个图表。不需要这样做，您需要编辑现有图表对象中的值，并在图表实例上调用update()。

const newLabels = ["t", "a", "b"];
const newData = [2,3,4];
chartInstance.data.labels = newLabels;
chartInstance.data.datasets[0].data = newData;
chartInstance.update();