如何在 Angular 7 中使用`apexchart`？答案

【问题标题】：How to use `apexchart` in Angular 7?如何在 Angular 7 中使用`apexchart`？
【发布时间】：2019-05-03 15:51:53
【问题描述】：

如何在 Angular 7 中使用 apexchart ？有人可以在打字稿中实现它吗？我正在 Angular 中搜索它的打字稿实现，但我无法做到。我的 Angular 版本是 7.2.4。

【问题讨论】：

您是否尝试过根据文档将其包含在您的索引中并创建图表？
是的，我这样做了，但问题是在打字稿文件中实现它。我需要@type chartjs 提供的东西。如何将 ApexChart 用作类型？
如果没有可用的类型，您可以tell TS it exists，但不会获得任何类型帮助。

标签： angular typescript apexcharts

【解决方案1】：

npm 上似乎有 Apexcharts 的包装器。欲了解更多信息：https://github.com/apexcharts/ng-apexcharts

使用示例：https://ngapexcharts-demo.stackblitz.io/

【讨论】：

我试过那个，但我找不到它的代码，并且选择 BAR 作为图表类型它没有显示任何结果..

【解决方案2】：

根据https://apexcharts.com/docs/installation 上的 Apexcharts 文档

首先：你需要安装包：npm i apexcharts

再次根据文档，您需要定义 ApexCharts 类型以用作： import ApexCharts from 'apexcharts'

如果这对您有用，请继续。但如果您收到“...没有默认导出”错误，则需要定义如下：
import ApexCharts from 'apexcharts/dist/apexcharts.common.js'

那么你需要一个html元素来绑定你的图表：

最后以适当的方法创建图表选项并将其呈现如下：

const options = {
  chart: {
    height: 300,
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Your chart will be looks like this image

【讨论】：

不适合我，文档是最新的吗？
有具体的错误信息吗？您以哪种方式导入库？我刚刚检查了文档中的简单 html 并且它有效。但不确定你的角度版本

【解决方案3】：

您可以在以下链接中找到使用 Angular 实现 ApexCharts 的正确步骤。 https://apexcharts.com/docs/angular-charts/

有关为 ApexCharts 设置项目的详细信息，请参阅此博客，您还可以查看一个示例来生成不同类型的图表。

Medium Blog.

【讨论】：