google 没有在 Angular 项目中使用 google-charts 定义答案

【问题标题】：google is not defined in Angular Project using google-chartsgoogle 没有在 Angular 项目中使用 google-charts 定义
【发布时间】：2021-10-27 10:45:52
【问题描述】：

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

我的代码是这样的：组件.html

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

组件.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 错误：未捕获（承诺中）：ReferenceError：未定义谷歌 ReferenceError：谷歌未定义在新的 OutputFrtbsaReportingComponent (output-frtbsa-reporting.component.ts:38) )

你能帮帮我吗？

【问题讨论】：

我期待在编译时出现错误，Typescript 不知道 google 是什么。如果您在文件顶部写declare const google; 会怎样？

标签： javascript angular charts graphics formatter

【解决方案1】：

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

1：我已将“private loaderService: ScriptLoaderService”添加到 costructor 中

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
        }
      ];
    });

【讨论】：