在数据排序条形图中的条形图中添加动画 Highcharts答案

【问题标题】：Add animation to bar in data sorting bar chart Highcharts在数据排序条形图中的条形图中添加动画 Highcharts
【发布时间】：2020-07-09 10:16:21
【问题描述】：

我尝试了什么：

highchartsLeaderBoard = 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:[],
      }]
  }

this.chartOptionsLeaderBoard.series[0].data.push(array)

我想要动画，比如其中的条是如何滑动的：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/datasorting/labels-animation

在上面的小提琴代码中，动画是在 setData() 中添加的。但是我不能在 angular 中使用 setData()。

提前致谢！！！

【问题讨论】：

标签： angular typescript highcharts

【解决方案1】：

要在使用 highcharts 和 highchart-angular 包装器时执行更新/setData，您需要更新 chartOptions（如您所做的那样），然后将 updateFlag 设置为 true。

文档参考：
https://github.com/highcharts/highcharts-angular

实例
https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update

【讨论】：