如何在Angular中为Highcharts排序条形图添加条形滑动动画

我刚好遇到过类似的Angular + Highcharts的场景，你没法用setData()的话，可以试试这两个方案来触发条形排序的滑动动画：

方案一：通过图表实例的update()方法触发动画 #

在Angular里，如果你用的是官方的highcharts-angular组件，可以先获取图表实例，然后调用update()方法来更新数据并触发动画。这种方式能直接让Highcharts感知到数据变化，从而执行dataSorting的动画逻辑。

代码示例： #

import { Component, ViewChild } from '@angular/core';
import { HighchartsChartComponent } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-leaderboard',
  templateUrl: './leaderboard.component.html'
})
export class LeaderboardComponent {
  @ViewChild(HighchartsChartComponent) chartComponent: HighchartsChartComponent;
  highcharts = Highcharts;
  chartOptionsLeaderBoard = {
    chart: {
        reflow: false,
        type: 'bar',
        marginLeft: 80,
        width: 500,
        borderWidth: 0,
        backgroundColor: 'transparent',
    },
    plotOptions: {
        bar: {
            borderWidth: 0,
        },
    },
    title: {
        text: 'LeaderBoard',
    },
    credits: { enabled: false },
    yAxis: {
        visible: false,
        title: { text: '' }
    },
    xAxis: {
        type: 'category',
        min: 0,
        labels: { animate: true, duration: 5000 }
    },
    legend: { enabled: false },
    series: [{
        zoneAxis: 'x',
        zones: [{ value: 1, color: '#ff4d40' }],
        dataLabels: {
            enabled: true,
            format: '{y:,.0f}',
            borderWidth: 0,
            color: 'white',
            style: { textOutline: 0 }
        },
        dataSorting: {
            enabled: true,
            sortKey: 'y',
            animate: true,
            duration: 5000
        },
        data: [],
    }]
  };

  // 新增数据的方法
  addNewData(newDataEntry: any) {
    // 合并原有数据和新数据
    const updatedData = [...this.chartOptionsLeaderBoard.series[0].data, newDataEntry];
    
    // 调用update方法更新数据，第二个参数true表示触发重绘和动画
    this.chartComponent.chart.update({
      series: [{
        data: updatedData
      }]
    }, true);
  }
}

方案二：通过变更检测触发图表重新渲染 #

如果你不想直接操作图表实例，可以利用Angular的变更检测机制，通过更新chartOptionsLeaderBoard的引用，让组件重新渲染图表，同时触发dataSorting的动画。

代码示例： #

// 新增数据的方法
addNewData(newDataEntry: any) {
  // 复制原series数组，避免直接修改原引用
  const updatedSeries = [...this.chartOptionsLeaderBoard.series];
  // 合并数据到新数组
  updatedSeries[0].data = [...updatedSeries[0].data, newDataEntry];
  
  // 重新赋值chartOptions，触发Angular变更检测
  this.chartOptionsLeaderBoard = {
    ...this.chartOptionsLeaderBoard,
    series: updatedSeries
  };
}

为什么直接push()不行？ #

直接用this.chartOptionsLeaderBoard.series[0].data.push(array)只是修改了数组的内容，但数组的引用没有发生变化。Angular的变更检测不会识别这种内部变化，Highcharts也不会主动监听数组内容的修改，所以没法触发dataSorting的动画逻辑。而上面两种方案都是通过创建新的数组引用或者调用Highcharts的API，明确告诉图表数据已更新，从而执行排序动画。

另外要确保你的dataSorting配置中animate: true和duration参数设置正确，这是动画生效的前提哦。

内容的提问来源于stack exchange，提问作者bollam_rohith