离子4中的示例Highcharts

Question

我正在尝试添加到我的离子4项目Highcharts（qazxsw poi）

使用本教程https://www.highcharts.com/

这样做，我得到这个错误可以有人帮助我

离子信息

https://www.highcharts.com/blog/tutorials/setting-chart-ionic-app-using-highcharts/

的package.json

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\****\*****\*****\*****\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v11.10.0 (D:\*****\nodejs\node.exe)
   npm    : 6.7.0
   OS     : Windows 10

tab2page.html

"highcharts": "^7.1.1",

tab2page.ts

<ion-header>
    <ion-toolbar>
        <ion-title>
            Tab Two
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div id="container" style="display: block;"></div>
</ion-content>

tab2.module.ts

import { Component } from '@angular/core';
import * as HighCharts from 'highcharts';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    var myChart = HighCharts.chart('container', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    });
  }

}

app.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }])
  ],
  declarations: [Tab2Page]
})
export class Tab2PageModule {}

在tab2.page.ts上出现此错误

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

图片来自错误：

{
    "resource": "/ionic/new/myApp/src/app/tab2/tab2.page.ts",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type '{ name: string; data: number[]; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | SeriesAreasplinerangeOptions | ... 88 more ... | SeriesZigzagOptions'.\n  Property 'type' is missing in type '{ name: string; data: number[]; }' but required in type 'SeriesZigzagOptions'.",
    "source": "ts",
    "startLineNumber": 30,
    "startColumn": 16,
    "endLineNumber": 33,
    "endColumn": 8,
    "relatedInformation": [
        {
            "startLineNumber": 249559,
            "startColumn": 5,
            "endLineNumber": 249559,
            "endColumn": 9,
            "message": "'type' is declared here.",
            "resource": "/ionic/new/myApp/node_modules/highcharts/highcharts.d.ts"
        }
    ]
}

Answer 1

您必须声明每个系列的类型或设置：

type = undefined

---

更好的解决方案是使用

ionViewDidLoad() {
  var myChart = HighCharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      type: undefined,
      data: [1, 0, 4]
    }, {
      name: 'John',
      type: undefined,
      data: [5, 7, 3]
    }]
  });
}

官方Highcharts封装器为Angular。它可以在这里下载：highcharts-angular。

home.page.html：

https://github.com/highcharts/highcharts-angular

home.page.ts

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div>
      <highcharts-chart
        style="margin: 30px;"
        [Highcharts]="Highcharts"
        [constructorType]="chartConstructor"
        [options]="chartOptions"
        [callbackFunction]="chartCallback"
        [(update)]="updateFlag"
        [runOutsideAngular]="runOutsideAngularFlag"
      ></highcharts-chart>
    </div>
</ion-content>

home.module.ts

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

import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = 'chart';
  chartCallback;
  chartOptions = {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  };

  constructor() {
    const self = this;

    this.chartCallback = chart => {
      self.chart = chart;
    };
  }
}

Answer 2

我有同样的错误，我让代码等待它工作。现在我遇到的问题是图表不适合设备。我等待你的答案

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HighchartsChartModule } from 'highcharts-angular';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HighchartsChartModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}