Highcharts是一款純JavaScript編寫(xiě)的圖表庫(kù)，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點(diǎn)擊下載Highcharts最新試用版

在本快速教程中，您將學(xué)習(xí)如何創(chuàng)建一個(gè)如下圖所示的項(xiàng)目

讓我們開(kāi)始吧??

對(duì)于此項(xiàng)目，我們正在使用以下技術(shù)：

• 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+

接下來(lái)是highcharts-angular和Highcharts庫(kù)的安裝：

# 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軟件包。該軟件包是該項(xiàng)目的核心，因?yàn)樗褂肁PI輕松創(chuàng)建具有完全靈活性的拖放界面的功能。

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

npm install @angular/cdk

這是我們?nèi)绾翁砑觾蓚€(gè)模塊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 { }

現(xiàn)在，讓我們?yōu)闇y(cè)試創(chuàng)建一些圖表。讓我們?cè)诖搜菔局惺褂谜劬€圖和條形圖。app.component

我們將通過(guò)訪問(wèn)API使用highcharts實(shí)例來(lái)自定義圖表

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>

想要購(gòu)買Highcharts正版授權(quán)的朋友可以