Добавление анимации к полосе на гистограмме сортировки данных Highcharts - PullRequest
Новая
       9

Добавление анимации к полосе на гистограмме сортировки данных Highcharts

1 голос
/ 09 июля 2020

Что я пробовал: 

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 () .. но я не могу использовать setData () в angular.

заранее СПАСИБО !!!

1 Ответ

1 голос
/ 09 июля 2020

Чтобы выполнить update / setData при работе с оболочкой highcharts и highchart- angular, вам необходимо обновить chartOptions (как и вы), а затем установить для updateFlag значение true.

Ссылки на документы:
https://github.com/highcharts/highcharts-angular

Живой пример
https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update

...