使用 Angular 9/8 添加 Highcharts

在本例中，我们将学习有关 highcharts 的知识。我们将使用 Angular 8 或 Angular 9 来做到这一点。在我们的 Angular 应用程序中，将使用 highcharts 创建一个样条图。为了创建图表，我们将使用 highcharts angular 9/8 并安装 highcharts 和 highcharts angular 的 npm 包。为了添加 highcharts，我们将使用以下描述的逐步过程

步骤 1

在此步骤中，我们将创建一个新应用程序。以下命令将用于创建 Angular 应用程序，如下所示

步骤 2

在此步骤中，我们将安装 Npm 包。我们将安装 highcharts 和 Angular 中 highcharts 的 npm 包。

步骤 3

在此步骤中，我们将导入 HighchartsChartComponent。我们将使用 highcharts-angular 导入它。之后，我们将添加声明部分。然后我们将使用一个名为 app.module.ts 的文件并像这样更新它

src/app/app.module.ts

步骤 4

在此步骤中，我们将使用 Highcharts。在这里，我们将使用一个名为 app.component.ts 的文件，我们将更新它。该文件用于创建数据 Json 数组，然后将其转发到 highcharts 选项变量。我们将使用 API 使用该服务，以便我们可以获得动态数据。

src/app/app.component.ts

步骤 5

在此步骤中，我们将显示 Highcharts。在这种情况下，我们将使用 HTML 文件，然后我们将像这样更新该文件

src/app/app.component.html

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出