开发学院

您的位置:首页>教程>正文

教程正文

Angular Highcharts:安装

  本文将指导您如何准备一个开发环境来开始使用Highcharts和Angular框架。在本章中,我们将讨论Angular 6所需的环境设置。要安装Angular 6,我们需要以下先决条件:

  •   Nodejs

  •   Npm

  •   Angular 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_homepage.jpg

  根据您的操作系统,安装对应的软件包。npm跟nodejs是捆绑在一起的,所以一旦安装了nodejs,npm也自动安装,要检查npm是否成功安装,请在控制台中输入npm -v,它会显示npm的版本。

C:\>npm -v
5.6.0

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

angular_cli.jpg

  输入如下命令来安装Angular CLI。

npm install -g @angular/cli

install_angular_cli.jpg

  一旦安装了Angular CLI,就可以开始使用Angular框架了。您可以使用自己常用的任何IDE,如WebStorm, Atom, Visual Studio Code等。

安装Highcharts

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

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

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

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    
],