Question

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

Answer 1

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

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

Medium Blog。

Answer 2

在npm上似乎有一个Apexcharts的包装器。有关更多信息：https://github.com/apexcharts/ng-apexcharts

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

Answer 3

根据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

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

3 个答案: