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

gijlo24d 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(196)

我有一个可变数量的图表显示与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>

(by顺便说一句，我希望我有几个折线图，而不是一个图表有几条线）
我的问题是，每次数据刷新时，我都有初始动画（从底部升起的线条）。我已经通过在[options]对象中将options.animation设置为false，成功地完全禁用了动画。
但是，有没有办法将这两组数据之间的转换制作成动画呢？

chart.js

来源：https://stackoverflow.com/questions/73556269/chartjs-has-animation-every-time-angular-refresh-the-data

1条答案

按热度按时间

oyt4ldly1#

在图表组件中，当数据发生更改时，您可以在图表示例上调用destroy()并重新创建整个图表。您需要编辑现有图表对象中的值，并在图表示例上调用update()，而不是执行此操作。

const newLabels = ["t", "a", "b"];
const newData = [2,3,4];

chartInstance.data.labels = newLabels;
chartInstance.data.datasets[0].data = newData;

chartInstance.update();

赞(0）回复(0）举报 2022-11-06

我来回答

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

1条答案

相关问题

热门标签

最新问答