Angular Highcharts - 環境搭建

本教程將指導您如何準備開發環境，以便開始使用 Highcharts 和 Angular 框架進行工作。本章將討論 Angular 6 所需的環境設定。要安裝 Angular 6，我們需要以下內容：

Node.js 版本必須大於 8.11，npm 版本必須大於 5.6。

Node.js

要檢查系統中是否安裝了 Node.js，請在終端中輸入 **node -v**。這將幫助您檢視當前系統上安裝的 Node.js 版本。

C:\>node -v
v8.11.3

如果沒有任何輸出，請在您的系統上安裝 Node.js。要安裝 Node.js，請訪問 Node.js 的主頁 https://nodejs.com.tw/en/download/ 並根據您的作業系統安裝軟體包。

Node.js 的主頁如下所示：

根據您的作業系統安裝所需的軟體包。安裝 Node.js 後，npm 也會隨之安裝。要檢查 npm 是否已安裝，請在終端中輸入 npm -v。它應該顯示 npm 的版本。

C:\>npm -v
5.6.0

藉助 Angular CLI，Angular 6 的安裝非常簡單。訪問 Angular 的主頁 https://cli.angular.io/ 以獲取命令的參考。

輸入 **npm install -g @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    
],

列印頁面