Angular Highcharts - 快速指南

Angular Highcharts - 概述

HighChart Angular Wrapper是一个基于 Angular 的开源组件，可在 Angular 应用程序中提供优雅且功能丰富的 Highcharts 可视化效果，并且可以与 Angular 组件无缝地一起使用。有些章节讨论了 Highcharts 的所有基本组件，并在 Angular 应用程序中提供了合适的示例。

特征

  • 兼容- 支持所有现代浏览器以及 iPhone/iPad 浏览器和 Internet Explorer 6 及以上版本。现代浏览器使用 SVG 进行图形渲染，而在旧版 Internet Explorer 中，图形是使用 VML 绘制的。

  • 纯 TypeScript - 不需要 JavaScript，因为 TypeScript 中提供了完整的 Highcharts API。

  • 无 Flash - 不需要 Flash 播放器或 Java 等客户端插件，因为 Highcharts 使用本机浏览器技术，并且图表可以在现代移动设备上运行而无需修改。

  • 干净的语法- 大多数方法都是可链接的，因此可以使用像 JSON 一样严格的语法来管理图表的配置选项。

  • 动态- 系列和点可以在图表创建后随时动态添加。支持事件挂钩。支持服务器交互。

  • 记录- Highcharts API 有大量代码和语法示例完整记录。

Angular Highcharts - 环境设置

本教程将指导您如何准备开发环境以开始使用 Highcharts 和 Angular Framework。在本章中，我们将讨论 Angular 6 所需的环境设置。要安装 Angular 6，我们需要以下内容 -

  • Nodejs
  • 尼普
  • 角度 CLI
  • 用于编写代码的 IDE

Nodejs 必须大于 8.11，npm 必须大于 5.6。

Nodejs

要检查您的系统上是否安装了nodejs，请在终端中输入node -v 。这将帮助您查看系统上当前安装的 Nodejs 版本。

C:\>node -v
v8.11.3

如果它没有打印任何内容，请在您的系统上安装nodejs。要安装nodejs，请进入nodejs主页https://nodejs.org/en/download/并根据您的操作系统安装软件包。

Nodejs 的主页如下所示 -

NodeJS 主页

根据您的操作系统，安装所需的软件包。一旦安装了nodejs，npm也会随之安装。要检查 npm 是否已安装，请在终端中输入 npm -v。它应该显示 npm 的版本。

C:\>npm -v
5.6.0

在 Angular CLI 的帮助下，Angular 6 安装非常简单。访问 Angular 主页https://cli.angular.io/获取命令参考。

角度 CLI

输入npm install -g @angular/cli，在您的系统上安装 Angular cli。

安装 Angular CLI

安装 Angular CLI 后，您将在终端中获得上述安装。您可以使用您选择的任何 IDE，即 WebStorm、Atom、Visual Studio Code 等。

安装高图

运行以下命令在创建的项目中安装 highchart 模块。

highchartsApp>npm install highcharts --save
+ highcharts@6.2.0
added 1 package in 137.534s

运行以下命令在创建的项目中安装 highchart 包装器模块。

highchartsApp>npm install highcharts-angular --save
+ highcharts-angular@2.3.1
added 1 package in 20.93s

在 highchartsApp.module.ts 文件中添加以下条目

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],

Angular Highcharts - 配置语法

在本章中，我们将展示使用 Angular 中的 Highcharts API 绘制图表所需的配置。

第 1 步 - 创建 Angular 应用程序

按照以下步骤更新我们在Angular 6 - 项目设置章节中创建的 Angular 应用程序 -

步 描述
1 创建一个名为highchartsApp的项目，如Angular 6 - 项目设置一章中所述。
2 如下所述修改app.module.ts、app.component.ts和app.component.html 。保持其余文件不变。
3 编译并运行应用程序以验证实现逻辑的结果。

以下是修改后的模块描述符app.module.ts的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
   declarations: [
      AppComponent,
      HighchartsChartComponent    
   ],
   imports: [
      BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件app.component.html的内容。

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

了解配置后，我们最终会看到更新后的 app.component.ts。

步骤 2 - 使用配置

创建 Highcharts 并创建图表选项

highcharts = Highcharts;
   chartOptions = {   
}

创建图表

使用chartOptions配置图表的类型、标题和副标题。

chart: {
   type: "spline"
},

x轴

使用 ChartOptions 配置要在 X 轴上显示的股票代码。

xAxis:{
   categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

y轴

使用 ChartOptions 配置要在 Y 轴上显示的标题。

yAxis: {          
   title:{
      text:"Temperature °C"
   } 
},

工具提示

配置工具提示。使用图表选项将后缀添加到值（y 轴）之后。

tooltip: {
   valueSuffix:" °C"
},

系列

使用 ChartOptions 配置要在图表上显示的数据。Series 是一个数组，其中该数组的每个元素代表图表上的一条线。

series: [
   {
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
   },
   {
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
]

例子

考虑以下示例以进一步理解配置语法 -

应用程序组件.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      series: [
         {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         },
         {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
         },
         {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
   };
}

结果

验证结果。

基本折线图

Angular Highcharts - 折线图

折线图用于绘制基于折线/样条线的图表。在本节中，我们将讨论不同类型的基于折线和样条的图表。

先生编号 图表类型和描述
1 基本线

基本折线图。
2 带数据标签

带有数据标签的图表。
3 时间序列，可缩放

带有时间序列的图表。
4 带倒轴的样条线

具有倒轴的样条图。
5 带符号的样条曲线

使用热/雨符号的样条图。
6 带绘图带的样条线

带有绘图带的样条图。

Angular Highcharts - 面积图

面积图用于绘制基于面积的图表。在本节中，我们将讨论不同类型的基于区域的图表。

先生。 图表类型和描述
1 基本区

基本面积图。
2 具有负值的区域

面积图具有负值。
3 堆叠面积

图表中的区域相互堆叠。
4 百分比面积

以百分比形式显示数据的图表。
5 缺失点的区域

数据中缺少点的图表。
6 倒轴

使用倒轴的区域。
7 面积样条

使用样条线的面积图。

Angular Highcharts - 条形图

条形图用于绘制基于条形的图表。在本节中，我们将讨论不同类型的条形图。

先生。 图表类型和描述
1 基本酒吧

基本条形图。
2 堆叠条

条形图相互堆叠。
3 具有负值的条形图

具有负值的条形图。

Angular Highcharts - 柱形图

柱形图用于绘制基于柱形的图表。在本节中，我们将讨论不同类型的基于柱形图的图表。

先生。 图表类型和描述
1 基础栏目

基本柱形图。
2 具有负值的列

具有负值的柱形图。
3 堆积柱

图表中的列相互堆叠。
4 堆叠和分组列

带有堆叠和分组形式的柱的图表。
5 具有堆叠百分比的列

带有堆积百分比的图表。
6 带有旋转标签的列

列中带有旋转标签的柱形图。
7 列范围

使用范围的柱形图。

Angular Highcharts - 饼图

GWP Highcharts - 饼图

饼图用于绘制基于饼图的图表。在本节中，我们将讨论不同类型的基于饼图的图表。

先生。 图表类型和描述
1 基本馅饼

基本饼图。
2 传说中的馅饼

带图例的饼图。
3 圆环图

甜甜圈图。

Angular Highcharts - 散点图

以下是基本散点图的示例。

我们已经在Highcharts 配置语法章节中看到了用于绘制图表的配置。

下面给出了基本散点图的示例。

配置

现在让我们看看所采取的附加配置/步骤。

系列

将图表类型配置为基于散点图。series.type决定图表的系列类型。这里，默认值为“line”。

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

例子

应用程序组件.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

结果

验证结果。

散点图

Angular Highcharts - 动态图表

动态图表用于绘制基于数据的图表，其中数据在图表渲染后可能会发生变化。在本节中，我们将讨论不同类型的动态图表。

先生。 图表类型和描述
1 样条线每秒更新一次

样条图每秒更新一次。
2 单击添加点

具有加点功能的图表。

Angular Highcharts - 组合

组合图表用于绘制混合图表；例如，条形图和饼图。在本节中，我们将讨论不同类型的组合图表。

先生。 图表类型和描述
1 柱形图、线形图和饼图

包含柱形图、折线图和饼图的图表。
2 双轴、行和列

具有双轴、线和柱的图表。
3 多轴

具有多个轴的图表。
4 用回归线进行散点

带回归线的散点图。

Angular Highcharts - 3D 图表

3D图表用于绘制3维图表。在本节中，我们将讨论不同类型的 3D 图表。

先生。 图表类型和描述
1 3D柱

3D 柱形图。
2 3D 散点图

3D 散点图。
3 3D 饼图

3D 饼图。

Angular Highcharts - 地图图表

地图图表用于绘制热图或树图。在本节中，我们将讨论不同类型的地图。

先生。 图表类型和描述
1 热图

热图。
2 树图

树图。