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（名称） - ＆gt; 60（值）

firefox - ＆gt; 30

边缘 - ＆gt; 10

...

我想将我的浏览器列表值动态地注入图表的数据，而不是手动，因为我的列表可能包含很多值。

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

想法？

Answer 1

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

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

之后

Angular：从数组对象的SetData到HighChart小部件

1 个答案: