Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

在本快速教程中，您將學習如何創建一個如下圖所示的項目

讓我們開始吧??

對于此項目，我們正在使用以下技術：

• Angular CDK angular/cdk 8.2.3.
• Highcharts V8.0.0.
• Highcharts-Angular.

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

接下來是highcharts-angular和Highcharts庫的安裝：

# install highcharts-angular and highcharts
npm install highcharts-angular highcharts

import { HighchartsChartModule } from 'highcharts-angular';
 @NgModule({
  imports: [
    ...
    HighchartsChartModule

import * as Highcharts from 'highcharts';

我們還必須從Angular Component Development Kit（CDK）安裝@ angular / cdk / drag-drop軟件包。該軟件包是該項目的核心，因為它包含使用API輕松創建具有完全靈活性的拖放界面的功能。

這是安裝最新版本的CDK的命令行：

npm install @angular/cdk

這是我們如何添加兩個模塊Highcharts-angular和DragDropModuleinapp.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HighchartsChartModule } from 'highcharts-angular';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
  imports:      [ BrowserModule, FormsModule,HighchartsChartModule ,DragDropModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

 現在，讓我們為測試創建一些圖表。讓我們在此演示中使用折線圖和條形圖。app.component

我們將通過訪問API使用highcharts實例來自定義圖表

import { Component } from "@angular/core";
import * as Highcharts from "highcharts";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  Highcharts = Highcharts;
  linechart = {
    series: [
      {
        data: [1, 2, 3]
      }
    ],
    chart: {
      type: "line"
    },
    title: {
      text: "linechart"
    }
  };
  barchart = {
    series: [
      {
        data: [1, 2, 3]
      }
    ],
    chart: {
      type: "bar"
    },
    title: {
      text: "barchart"
    }    
  };
}

<div class="example-box" cdkDrag>
<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="linechart"
  style="width: 100%; height: 400px; display: block;" &gt</highcharts-chart>
</div&gt
<div class="example-box" cdkDrag>
<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="barchart"
  style="width: 100%; height: 400px; display: block;" ></highcharts-chart>
</div>

想要購買Highcharts正版授權的朋友可以