Highcharts Angular

优质

小牛编辑

125浏览

2023-12-01

Highcharts Angular 是我们基于 Angular 框架封装的 Highcharts，可以很方便的在 Angular 开发环境中使用 Highcharts 创建交互性图表。

开发环境

确保您的 node, NPM, Angular 已经更新到最新版本。以下是经过测试和要求的版本：

node 6.10.2+
npm 4.6.1+
@angular/cli 6.0.0+

Highcharts Angular 还需要您在项目中已经安装了 Highcharts：

highcharts

使用 npm 安装 Highcharts

安装及使用

在您的 Angular 应用程序中通过 NPM 获取下载包：
```
npm install highcharts-angular --save
```
如果您还没有安装 Highcharts 库，请一起获取下载包：
```
npm install highcharts highcharts-angular --save
```

在您的 app.module.ts 中，添加 HighchartsChartModule:

...
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
imports: [
    ...
    HighchartsChartModule

在 app.component.ts 文件中，顶部添加其他 import 的位置，将 Highcharts 添加进去
```
import * as Highcharts from 'highcharts';
```

在同一文件（app.component.ts）中，添加模板 Highcharts-angular 组件选择器 highcharts-chart：

<highcharts-chart 
    [Highcharts]="Highcharts"

    [constructorType]="chartConstructor"
    [options]="chartOptions"
    [callbackFunction]="chartCallback"

    [(update)]="updateFlag"
    [oneToOne]="oneToOneFlag"
    [runOutsideAngular]="runOutsideAngularFlag"

    style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

双引号的右侧名称只是您接下来要设置的变量的名称，所以您可以随意命名。选择器底部的样式是可选的，但浏览器不知道如何显示 <highcharts-chart ，因此您应该为它设置一些样式。

在同一个文件（app.component.ts）中，所有变量都应该被设置为 export class AppComponent { ，如下所示：

export class AppComponent {
    Highcharts = Highcharts; // 必填
    chartConstructor = 'chart'; // 可选 String，默认为 'chart'
    chartOptions = { ... }; // 必填
    chartCallback = function (chart) { ... } // 可选 Function，图表加载后的回调函数，默认为空
    updateFlag = false; // 可选 Boolean
    oneToOneFlag = true; // 可选 Boolean，默认为 false
    runOutsideAngular = false; // 可选 Boolean，默认为 false
    ...

选项的具体描述如下所示

Hello world 演示

按照安装及使用的方法创建一个简单的 demo

在 app.component.ts 的 HTML 模板中使用：

<highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"

    style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

导出变量：

export class AppComponent {
    Highcharts = Highcharts;
        chartOptions = {
            series: [{
                data: [1, 2, 3]
            }]
    };
...

构建并运行你的 Angular 应用程序以查看基本涉嫌图

选项具体配置

1. Highcharts

本选项为必填。类型为 Object 。这是一个 Highcharts 实例，包含必需的核心、可选的模块、插件、映射、包装器和设置全局选项的 setOptions 。更多详细信息将在文档的下一部分中展示。

2. constructorType

本选项为可选。类型为 String 。这是构造函数方法的字符串。可选值为：

'chart' - 标准的 Highcharts 构造函数 - 适用于任何 Highcharts 实例，是默认值
'stockChart' - Highstock 的构造函数 - 需要 Highstock 模块
'mapChart' - Highmaps 的构造函数 - 需要 Highmaps 或 map 木块

3. options

本选项为必填。类型为 Object 。可以在 Highcharts API 文档中查看可以配置的图表选项。可以被作为基本测试而设置的最小工作对象为

{
    series: [{
        data: [1, 2]
    }]
}

4. callbackFunction

本选项为可选。类型为 Function 。这是图表创建完成后执行的回调函数。该函数的的第一参数将保存创建的图表。函数中的 this 默认指向图表。

5. (update)

本选项为可选。类型为 Boolean ，默认为 false 。用于触发图表的更新，因为 Angular 不会检测传递给组件的对象中的嵌套是否更改。将对应的变量（示例中为 updateFlag ）设置为 true，在对图表进行更新之后， Highchart-angular 组件会将其异步更改为 false 。

6. oneToOne

本选项为可选。类型为 Boolean ，默认为 false 。onToOne 参数被用于更新。当被设置为 true 时，series, xAxis 和 yAxis 选项将被一对一更新，并且项目将要么被添加，要么被删除以匹配新的更新选项。例如，在图表中有两个系列的情况下，我们调用 chart.update（它将改变每个图表数据或者如果 updateFlag 被设置为 true ），如果配置对象有三个系列，一个系列将被添加。如果我们只用含一个系列的配置对象调用 chart.update ，图表中将会被移除一个系列。如果我们设置的是一个空系列，图表中的所有系列将被移除，但是如果在新的设置中忽略了系列的属性，那么所有的系列都将不变。如果系列具有 id 值，那么新系列将会与 id 匹配，其余部分将被删除。

本选项在演示 Demo 的第一个图表中被使用 - 尝试在 textarea 的输入框中设置具有不同系列数量的新图标选项，以查看此属性的实际效果。

7. runOutsideAngular

本选项为可选。类型为 Boolean ，默认为 false 。当此选项在图表中被设置为 true 时，会在 Angular 区域外黄建和更新图表，并且 Highcharts 事件不会触发 Angular 的更改检测。有关 runOutsideAngular 的详细信息请参考 Angular 文档。此选项对于更大、更复杂的应用程序较为有用（请参考讨论）

在演示 Demo 中使用了本选项

Chart 实例

可以使用以下方式获取到图表实例：

图表的回调函数 - chart 作为第一个参数被提供（请查看演示 Demo 中的 hcCallback 函数）
图表的事件 - 所有的图表事件的…context…是 chart 实例
组件的输出 chartInstance - 在创建图表后被发出（请查看演示 Demo 中的 logChartInstance函数）

注意： 如果您在图表的 load 事件或图表的回调函数中获取图表实例并将其导出，那么在此函数将在图表实例被导出后再次执行，因为用于导出的图表正在被创建。要区分函数什么时候被图表调用什么时候被用于导出的图表调用，您可以通过查看 chart.renderer.forExport 。被导出的图表将被设置为 true ，主图表为 undefined 。

Highcharts实例详情

这是一个 Highcharts 实例，可选的包含初始化的模块、插件、映射、包装器以及使用 setOptions 设置的 全局选项。这个实例是必需的。

注意： Highcharts 实例是通过 Angular 应用程序中的组件共享的，因此加载的模块将影响所有的图表。

1. 实例

作为核心内容，您可以加载 Highcharts ，Highstock 或者 Highmaps 。

对于 Highcharts:

import * as Highcharts from 'highcharts';

对于 Highstock:

import * as Highcharts from 'highcharts/highstock';

对于 Highmaps:

import * as Highcharts from 'highcharts/highmaps';

或者对于带有地图模块的 Highcharts:

import * as Highcharts from 'highcharts';
import HC_map from 'highcharts/modules/map';
HC_map(Highcharts);

2. 添加模块

模块是 Highcharts 的官方插件 - 包含 Highstock 技术指标，风格主题，特定的系列类型（例如甘特图、关系图）。使用 Highcharts ，Highstock 或 Highmaps 导入 Highcharts 后，使用 import 导入模块并初始化 Highcharts 变量上的每个模块。

import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

或者可以通过 require ，但通常（取决于您应用程序的配置）declare var require: any; 在加载模块的 TypeScript 文件的顶部需要附加生命。

import * as Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);

3. 添加插件

插件是第三方/社区制作的 Highcharts 插件（插件列表在 Highcharts 插件注册表中）。使用前需要确保插件支持通过 NPM 加载并加载所需文件。在实例中 Custom-Events 支持 NPM 加载，因此在安装软件包后，您可以对其初始化为：

import * as Highcharts from 'highcharts';
import * as HC_customEvents from 'highcharts-custom-events';
HC_customEvents(Highcharts);

如果插件不支持通过 NPM 加载，您可以将其视为包装器 - 请参阅下面的说明

如果显示错误为缺少 TypeScript 定义的 d.ts - 请参阅 Highcharts 文档的解决问题部分获取 TypeScript 用法。

4. 添加 Highmaps 中的地图

官方地图集合已经发布，这里是加载地图的说明。示例也可以在演示 Demo 中被找到。

5. 加载wrapper

包装器是 Highcharts 的自定义扩展。要以加载模块同样的方式加载包装器，您可以将其另存为 Javascript 文件，并通过在文件的开头和结尾添加以下的代码来编辑它

(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function (Highcharts) {

...
/* wrapper code */
...

}));

接下来，您将加载本地 .js 文件，因此您应该在应用中的 tsconfig.json 中添加 allowJS: true

...
"compilerOptions": {
    "allowJs": true,
    ...

包装器已经准备好导入您的应用程序。使用 require 代替 import 防止 TS5055 错误。

import * as Highcharts from 'highcharts';
require('./relative-path-to-the-wrapper-file/wrapper-file-name')(Highcharts);

relative-path-to-the-wrapper-file 的地方应该是相对（对于导入包装器的模块）路径到包装器文件，wrapper-file-name 为包装器文件的名称。

如果显示错误为缺少 TypeScript 定义的 d.ts - 请参阅 Highcharts 文档的解决问题部分获取 TypeScript 用法。

6. `setOptions` 的使用

使用 setOptions 的最佳时机在 Highcharts 实例准备就绪并且在主要组件设置 Highcharts 变量之前。例如：

import * as Highcharts from 'highcharts/highstock';

...

Highcharts.setOptions({
    title: {
        style: {
            color: 'orange'
        }
    }
});

...

export class AppComponent {
    Highcharts = Highcharts;

演示 Demo

下载（或克隆）highcharts-angular GitHub仓库中的内容。

在系统的控制台中，下载的主目录中运行：

npm install
npm start

应用程序将在默认浏览器中打开：http://localhost:4200/

如果要在不同端口上打开，例如 12345 ，请使用

npm start - --port 12345

1. 执行应用程序

保持控制台运行并修改一些文件，在保存应用程序后将会重新加载并刷新本地预览页面

2. 要修改的文件

app.component.ts ( in src\app )
包含在 Angular 主要组件中会使用到的图表组件
chart.component.ts ( in src\app\chart )
包含创建 Highcharts 图表的图表组件

组件修改

使用 Angular Cli v6 时，必须在每次更新后手动重建库，以便更改可以显示在应用程序中。

对于 highcharts-chart.component.ts 文件，每次修改后执行以下命令：

npm run build

如果您在重建库时，在另一个终端窗口中运行着应用程序，则修改将被反映在您的浏览器中（注意：您可能需要在实时重新加载后再次刷新浏览器才能看到更改）

有关构建插件库的详细信息，请查看https://github.com/angular/angular-cli/wiki/stories-create-library

对于 CHANGELOG.md 更新时请使用 npm run release。

帮助

如果需要技术支持，请联系 Highcharts 技术支持

对于 Highcharts 的 TypeScript 问题，请先查看 TypeScript 用法的 Highcharts 文档

常见问题

1. 如何添加和使用指标？

添加指标作为任意的其他模块。

在线试一试

2. 如何添加和使用主题？

添加主题作为任意的其他模块。有关示例请查看演示 Demo

有关自定义主题的更多信息，请访问 Highcharts 文档的主题部分

3. 我对于 Higucharts 和 Typescript 有一个普遍性的问题

报告此问题的正确地址是 Highcharts 主仓库

4. 同步图表的 Angular 演示

基于同步图表的原生 Highcharts 演示。另外在图表之间添加了基于类的同步演示