javascript - Angular : SetData to HighChart widget from an array object

Question

我在我的 Angular 组件下使用一个 highchart 小部件:

图表演示: https://www.highcharts.com/demo/pie-legend

从文档来看，使用它是这样的:

Highcharts.chart('divChart', {
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
          },
          title: {
            text: this.nb
          },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false
              },
              showInLegend: true
            }
          },
          series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
              name: 'Microsoft Internet Explorer',
              y: 56.33
            }, {
              name: 'Chrome',
              y: 24.03,
              sliced: true,
              selected: true
            }, {
              name: 'Firefox',
              y: 10.38
            }, {
              name: 'Safari',
              y: 4.77
            }, {
              name: 'Opera',
              y: 0.91
            }, {
              name: 'Proprietary or Undetectable',
              y: 0.2
            }]
          }]
        });

但是由于我动态加载数据(chrome，firefox ...)， 我现在有一组键/值数据指示每个浏览器及其值:

  browsers: {[key: string ]: number } = {};

例如我的浏览器列表包含:

chrome(名称)-> 60(值)

火狐 -> 30

边缘-> 10

...

我想将我的浏览器列表值动态注入(inject)到图表的数据中，而不是手动注入(inject)，因为我的列表可能包含大量值。

我认为有一些名为 setData 的方法，但我不知道它是否有用。

想法？

Answer 1

是的，有setData函数 http://api.highcharts.com/highcharts/Series.setData

但之后您需要更新图表http://api.highcharts.com/highcharts/Series.update