Ionic 2 Highcharts

Question

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

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

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

 angular2-highcharts include in my node_modules

请帮助

Answer 1

你可能正在使用角度2 RC。 mharrington的答案是关于离子beta.37（我猜），它使用角度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' < / p>

Answer 2

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

• docs

  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: {..}
      ... 
  }
  

我希望我很清楚。