【HighChart教程】Highcharts Angular包装器

下载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
  ...