如何在angular7-8代码中设置google图表的选择

Question

我的页面上有几个动态初始化的谷歌甜甜圈图表。我可以在"on-select“的帮助下知道哪个切片被点击了。

但我需要从代码中选择切片。该怎么做呢？

PS:我不使用google.visualization，我想跳过使用这种方式

package.json："angular-google-charts": "^0.1.6"

HTML

<google-chart
                  id="chart_{{ i }}"
                  on-select="company.selectChartHandler($event)"
                  (click)="($event.target)"
                  [title]="company.chart.title"
                  [type]="company.chart.type"
                  [data]="company.chart.data"
                  [columnNames]="company.chart.columnNames"
                  [options]="company.chart.options"
                  [width]="company.chart.width"
                  [height]="company.chart.height"
                >
  </google-chart>

TypeScript

export class CompanyRecord {
  chart;

selectChartHandler(selectedItem) {
    let selectedItemIndex;
    if (selectedItem[0]) {
      selectedItemIndex = selectedItem[0].row;
    }
  }

private _configureChart() {
    this.isShowChart = true;
    this.colors = this._googleChartsService.getColorPalette();
    const chartsSlicesColorPalette = this._googleChartsService.getColoredSlicesConfig(this.colors);
    this.chart = new Object({
      title: '',
       type: 'PieChart',
       data: this.PercentageData,
       columnNames: ['Data1', 'Value'],
       options: {
        pieHole: 0.6,
        tooltip: { trigger: 'none' },
        legend: 'none',
        slices: chartsSlicesColorPalette,
        pieSliceText: 'none',
        chartArea: {
           width: '100%',
           height: '90%'
         }
       },
        width: 300,
        height: 300
      });
   }
}

Answer 1

要在图表上进行选择，您需要引用图表对象。

您可以从图表包装器界面中获取。

this.chart.getChart()

然后，您可以使用setSelection method。

它接受对象的数组。

对于饼图，每个对象都应该有一个row属性，

使用要选择的行索引。

// select first row
this.chart.getChart().setSelection([{row: 0}]);

如果希望图表在最初绘制时具有选定内容，

您需要等待'ready'事件归档，

在做出选择之前。