离子 2 Highcharts答案

【问题标题】：Ionic 2 Highcharts离子 2 Highcharts
【发布时间】：2017-08-23 18:14:54
【问题描述】：

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

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

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

 angular2-highcharts include in my node_modules

请帮忙

【问题讨论】：

如果下面的答案不能为您解决问题，请检查您使用的脚本版本。
你的 package.json 中有高图表吗？我之前添加了一个库，但没有添加标志 --save，然后没有添加到 package.json 中。

标签： angular ionic-framework highcharts ionic2 highcharts-ng

【解决方案1】：

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

现在更新为ChartModule。见下文或查看github 和他们的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 {}

在你的班级里：

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] 来源：ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'

【讨论】：

【解决方案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: {..}
    ... 
}

我希望我是清楚的。

【讨论】：

感谢您的帮助