google 未在 Angular 项目中使用 google-图表定义

Question

我在我的 angular 项目中使用 google-图表。我需要将值格式化到我的图表中，我找到了这个文档： https://github.com/FERNman/angular-google-charts#formatters

我的代码是这样的： component.html

<google-chart  #grafico
            [type]="type" 
            [data]="dataArea" 
            [options]="options"
            [formatters]="myFormatters"
            style="width: 100%;">
         </google-chart>

component.ts

type = 'AreaChart';
      dataArea = [];
      options = {
        isStacked: true,
        pointSize: 4,
        chartArea: { left: 40, top: '5%', width: '85%', height: '80%' },
        legend: { position: 'none' },
        height: 380,
        colors: ['rgb(0, 0, 128)', 'grey', 'orange'],
        vAxis: {format: 'short'}
      };

  myFormatters = [
    {
      formatter: new google.visualization.NumberFormat({ decimalSymbol: '.',
      groupingSymbol: ',' }),
      colIndex: 1
    },
    {
      formatter: new google.visualization.NumberFormat({ decimalSymbol: ',',
      groupingSymbol: '.' }),
      colIndex: 5
    }
  ];

但是控制台给我这个错误：

core.js:6210 ERROR Error: Uncaught (in promise): ReferenceError: google is not defined ReferenceError: google is not defined at new OutputFrtbsaReportingComponent (output-frtbsa-reporting.component.ts:38) )

你能帮我吗？

Answer 1

我已经通过这种方式解决了这个问题：

1: 我已将“private loaderService: ScriptLoaderService”添加到构造函数中

2：进入onInit

this.loaderService.loadChartPackages().subscribe(() => {
      // Start creating your chart now
      this.myFormatters = [
        {
          formatter: new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }),
          colIndex: 1
        },
        {
          formatter: new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }),
          colIndex: 2
        },
        {
          formatter: new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }),
          colIndex: 3
        }
      ];
    });

google 未在 Angular 项目中使用 google-图表定义

google is not defined in Angular Project using google-charts

javascript

graphics

charts

formatter

angular