【HighChart教程】Highcharts Angular包装器

Angular已成为许多开发人员的首选JavaScript框架。它提供了许多现代便利，例如数据绑定，简单的第三方集成，以及为开发人员提供的整体编码。

下载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正版授权，请点击“咨询在线客服”哟！

标签：JavaScript 图表图表控件highcharts