highcharts 离子4中的高值图表示例

0wi1tuuw 于 2022-11-10 发布在 Highcharts

关注(0)|答案(3)|浏览(292)

我正在尝试添加到我的ionic4项目 highcharts （https://www.highcharts.com/）
使用本教程https://www.highcharts.com/blog/tutorials/setting-chart-ionic-app-using-highcharts/
做它，我得到这个错误有人能帮助我请

离子信息

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

软件包.json

"highcharts": "^7.1.1",

选项卡2页面. html

<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>

选项卡第2页. 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]
      }]
    });
  }

}

选项卡2.模块. 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 {}

应用程序模块.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 {}

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

{
    "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"
        }
    ]
}

错误图像：

（来源：imgbbb.com）

highcharts

来源：https://stackoverflow.com/questions/55886989/example-highcharts-in-ionic-4

3条答案

按热度按时间

bis0qfac1#

您必须为每个系列声明类型或设置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 Package 器。它可以在这里下载：https://github.com/highcharts/highcharts-angular。

主页.html：

<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>

主页.页面.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;
    };
  }
}

主页.模块.ts

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

赞(0）回复(0）举报 2022-11-10

t98cgbkg2#

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

this.chartOptions = HighCharts.chart('container', {
    chart: {
      type: 'pie',
      backgroundColor: '#E6ECF3',
    },
    title: {
      text: ''
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    colors: ['#086d54', '#097f62', '#0b9270', '#0ca47e', '#0db68c', '#0fc89a', '#10dba8', '#11edb7'],
    series: [{
        name: 'test',
        data: [{
          name: 'Parte 1',
          y: 61.41
        }, {
            name: 'Parte 2',
            y: 11.84
        },{
          name: 'Chrome',
          y: 61.41
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }],
        type: undefined
      }]
    });

赞(0）回复(0）举报 2022-11-10

a14dhokn3#

用作图表的任意after选项对象（将其转换为任意），如下所示👇

<pre>
   this.chartOptions = HighCharts.chart('container', {
    chart: {
      type: 'pie',
      backgroundColor: '#E6ECF3',
    },
    title: {
      text: ''
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    colors: ['#086d54', '#097f62', '#0b9270', '#0ca47e', '#0db68c', '#0fc89a', '#10dba8', '#11edb7'],
    series: [{
        name: 'test',
        data: [{
          name: 'Parte 1',
          y: 61.41
        }, {
            name: 'Parte 2',
            y: 11.84
        },{
          name: 'Chrome',
          y: 61.41
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }]
      }]
    } as any);
</pre>

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 离子4中的高值图表示例

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

3条答案

相关问题

热门标签

最新问答