带有 Angular V14 的 Highcharts

随着 Angular 14 版本的发布，引入了独立组件，以及NgModule变得可选项；促进构建和构建代码库的新方法。

在本文中，我将创建一个图表，并了解如何使用和集成 Angular 独立组件以及官方 Highcharts Angular 包装器。让我们开始吧。

要使用最新版本的 Angular 创建项目，首先使用以下命令更新 angular-cli 包：
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

对于这个项目，我们使用：

·Angular 14.

·Highcharts V10.1.0.

·Highcharts-Angular.

该项目使用 Angular 应用程序环境和工作区进行设置，其设置如下：

·Node: 14.17.0

·npm 8.3.1

·Angular CLI: 14.0.2.

使用 Highcharts 设置 Angular 项目

1.如果你不熟悉这种类型的环境，官方 Angular 文档描述了如何设置本地环境工作区，以及有关独立组件的更多信息。

2.要安装highcharts angular和highcharts库，请运行以下说明：npm install highcharts angular--save。

3.要导入包，请转到app.module.ts文件，然后从highchartsangular包导入模块HighchartsChartModule。

4.要构建Highcharts图表，请安装Highcharts: npm install Highcharts--save。

5.我们将app.compoent.ts声明为一个独立组件，并在导入数组中导入HighchartsChartModule，而不是NgModule（可选）。应用程序级依赖项，如路由、main.ts中的依赖项注入配置以及app.component.ts或任何其他组件中的组件级。

6.从main.ts引导应用程序。

7.点击这个Stackblitz项目找到带有代码的完整工作示例。以下是最终结果：