下載Highcharts最新版本

Angular已成為許多開發人員的首選JavaScript框架。它提供了許多現代便利，例如數據綁定，簡單的第三方集成，以及為開發人員提供的整體編碼。為了方便我們的客戶，我們希望確保在Angular項目中使用Highcharts盡可能簡單。因此，我們很高興為您呈現我們的官方Highcharts Angular包裝，可以免費使用（請注意，使用Highcharts進行商業項目需要有效的許可證）。

讓我們快速瀏覽一下包裝器以及隨附的演示應用程序。

備注

確保您擁有最新的node，npm和Angular。以下演示應用程序已經過測試：

• node 6.10.2+
• npm 4.6.1+/li>
• @angular/cli 1.0.1+/li>

運行演示

首先要做的是打開終端，創建一個文件夾來保存工作，然后克隆或下載以下Github存儲庫的內容。 運行此命令以安裝依賴項npm install，并使用此命令啟動演示npm start

結果應如下：

瀏覽到演示代碼的目錄，然后打開文件：app.module.ts

請注意，主要組件HighchartsChartComponent已添加到app模塊。它提供了Angular和Highcharts之間的接口。

app.module.ts

import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
  declarations: [
    HighchartsChartComponent,
    ...

要使用Highcharts生成圖表，首先需要使用以下命令導入Highcharts模塊，然后將其添加到app.component.ts文件中：現在，是時候在同一文件中添加Highcharts-angular選擇器：npm install highcharts --save，import * as Highcharts from 'highcharts';

<highcharts-chart 
  [Highcharts]="Highcharts"

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

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

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

選擇器將HTML元素（稍后由包裝器更改）定義為圖表。 注意報價，如之間的變量"chartConstructor"，"chartOptions"等這些變量在出口類設置的選項AppCompoenent：

export class AppComponent {
  Highcharts = Highcharts; // required
  chartConstructor = 'chart'; // optional string, defaults to 'chart'
  chartOptions = { ... }; // required
  chartCallback = function (chart) { ... } // optional function, defaults to null
  updateFlag = false; // optional boolean
  oneToOneFlag = true; // optional boolean, defaults to false
  ...

購買Highcharts正版授權，請點擊“”喲！