如何在 Angular 6 中使用 Amcharts？

Question

我正在 angular6 项目中实现 amcharts4 "Animated-Gauge" 演示。

这是我的代码：

它在 StackBlitz 在线编辑器上运行良好，但在我的 angular6 项目中实施时抛出错误。它在第 25 行发出错误警告，即 this

var axis = chart.xAxes.push(new am4charts.ValueAxis());

当我将鼠标悬停在第 25 行错误时，它会抛出此错误。

Argument of type 'ValueAxis<AxisRenderer> is not assignable to parameter'
of type Axis<AxisRendererCircular>

这是我的错误图片：

我该如何解决这个问题？

Answer 1

有时您需要向 typescript 编译器提供提示，以便它知道您为仪表图使用的轴类型。尝试将新的值轴实例化修改为：

chart.xAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererCircular>());

如果您运行对仪表图表的类别轴（如果有的话）遇到类似的错误，请使用

chart.yAxes.push(new am4charts.CategoryAxis<am4charts.AxisRendererRadial>());

还要确保您的本地项目的 TypeScript >= 2.8.1（stackblitz 使用的是 3.1.1），并确保您的 tsconfig.json 中有以下几行，如 here 所述

{
  "compilerOptions": {
    "strictNullChecks": false,
    "strictFunctionTypes": false
  }
}

Answer 2

转到您的第 25 行并替换此行。

var axis = chart.xAxes.push(new am4charts.ValueAxis():any);

其实问题是，你没有声明数据类型

分配类型'any'。它会起作用，您将不会再收到错误消息

Answer 3

只需更改第 23 行，添加 as any

 let chart  = am4core.create("chartdiv", am4charts.GaugeChart) as any;

How to use Amcharts4 in angular6?