离子 2 Highcharts

Question

我正在使用 Ionic 2 框架并希望实现 highcharts。

我按照 mharington（ionic 团队）的这个步骤 https://forum.ionicframework.com/t/ionic-2-and-highcharts-modules/59365/2 设置了我的第一个高图表。

我得到的错误是我无法导入它，但我安装了节点模块

 angular2-highcharts include in my node_modules

请帮忙

Answer 1

您可能正在使用 angular 2 RC。 mharrington 的回答是关于 ionic beta.37（我猜），它使用了 angular 2.

的 beta 版本

现已更新为ChartModule。请参阅下文或查看 github and their demo (plnkr)

如 angular2-highcharts 所述：

在您的 @ngModule 声明文件中（概率 app.module.ts）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [BrowserModule, ChartModule],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

在你的 class 中：

import { Component } from '@angular/core';

@Component({
    selector: 'simple-chart-example',
    template: `
        <chart [options]="options"></chart>
    `
})
export class App {
    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: HighchartsOptions;
}

此外，根据您使用的版本，您可能需要更改从

导入

import { ChartModule } from 'ng2-charts';

至

import { ChartModule } from 'ng2-charts/components/charts/charts';

因为this issue (#440)

请记住，文档可能已过时，具体取决于版本，如果绑定到 [datasets] 失败，请绑定到 [data] 来源：

Answer 2

要在 Ionic 2 中使用 HighChart，您必须：

installation
```
npm install highcharts --save
```

在要使用图表的页面加载模块

declare var require: any;
let hcharts = require('highcharts');
require('highcharts/modules/exporting')(hcharts);`

在 activity.html 页面上
```
<div #graph></div>
```

最后

initLapChart() {
    hcharts.chart(this.div.nativeElement, {
        chart: {..}
    ... 
}

希望我说清楚了。

离子 2 Highcharts

Ionic 2 Highcharts

highcharts

ionic-framework

highcharts-ng

ionic2

angular