本文共 1129 字，大约阅读时间需要 3 分钟。
首先，我们需要通过 npm 来安装 Angular Highcharts 以及其类型定义。运行以下命令：
npm i --save angular-highcharts highchartsnpm i --save-dev @types/highcharts
下载完成后，检查 package.json 文件确保包名正确无误。
在 app.module.ts 文件中，我们需要引入 ChartModule。在 imports 数组中添加：
import { BrowserModule } from '@angular/core';import { ChartModule } from 'angular-highcharts';@NgModule({ imports: [ BrowserModule, ChartModule ]})export class AppModule {} 这个步骤看起来没问题，但有时候可能会因为路径错误或其他原因导致没有效果。如果遇到问题，可以尝试完全不引入 ChartModule，整应用也会正常运行。
在需要显示图表的组件中，首先导入 Highcharts 模块：
import * as Highcharts from 'highcharts';
然后添加一个图表配置对象：
const options: { chart: { type: 'bar'; }; title: { text: '我的第一个图表' }; xAxis: { categories: ['苹果', '香蕉', '橙子'] }; yAxis: { title: { text: '吃水果个数' } }; series: [ { name: '小明', data: [1, 0, 4] }, { name: '小红', data: [5, 7, 3] } ];}; 注意事项：
options 变量的类型声明正确options，再调用图表插件<div id="container"></div>）在组件的 HTML 文件中添加一个容纳图表的容器：
最终<head>区域无需特殊处理。
请注意，所有技术细节需根据实际项目调整，如图表类型、样式、数据来源等。此文档仅适用于指导性质，具体实现需根据实际需求进行个性化设计。在比较广泛的应用中，建议增加加载优化、错误处理和状态管理等功能。
转载地址：http://rfrmz.baihongyu.com/