【问题标题】:ionic 2 Uncaught (in promise): Error: Highcharts error #17: www.highcharts.com/errors/17ionic 2 Uncaught (in promise):错误:Highcharts 错误 #17:www.highcharts.com/errors/17
【发布时间】:2018-02-19 02:12:21
【问题描述】:

我想在我的项目中添加 highchart 仪表,但我给了

未捕获(承诺):错误:Highcharts 错误 #17:www.highcharts.com/errors/17 错误

它对我说;加载 highcharts-more.js 文件,但我不知道如何加载

我搜索了但我找不到任何东西

感谢现在

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { KanalolusturPage } from '../pages/kanalolustur/kanalolustur';
import { KanalPage } from '../pages/kanallistele/kanallistele';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { DbProvider } from '../providers/db/db';
import { IonicStorageModule } from '@ionic/storage';
import { HttpModule } from '@angular/http';
import { SQLitePorter } from '@ionic-native/sqlite-porter';
import { SQLite } from '@ionic-native/sqlite';
import { TaskServiceProvider } from '../providers/task-service/task-service';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'Highcharts';



@NgModule({
  declarations: [
    MyApp,
    KanalolusturPage,
    KanalPage,
    TabsPage,
    GetlerPage,
    PostlarPage,
    UyelikPage,
    ElementolusturPage,
    VerilerPage,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    ChartModule.forRoot(highcharts)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    KanalolusturPage,
    KanalPage,
    TabsPage,
    GetlerPage,
    PostlarPage,
    UyelikPage,
    ElementolusturPage,
    VerilerPage,

  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    DbProvider,
    DbProvider,
    SQLitePorter,
    SQLite,
    TaskServiceProvider,
  ]
})
export class AppModule {}

veriler.ts

constructor(public navCtrl: NavController, public navParams: NavParams,public http: Http) {


    this.chartOptions={
      chart: {
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false
},

title: {
    text: 'Speedometer'
},

pane: {
    startAngle: -150,
    endAngle: 150,
    background: [{
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF'],
                [1, '#333']
            ]
        },
        borderWidth: 0,
        outerRadius: '109%'
    }, {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#333'],
                [1, '#FFF']
            ]
        },
        borderWidth: 1,
        outerRadius: '107%'
    }, {
        // default background
    }, {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
    }]
},

// the value axis
yAxis: {
    min: 0,
    max: 200,

    minorTickInterval: 'auto',
    minorTickWidth: 1,
    minorTickLength: 10,
    minorTickPosition: 'inside',
    minorTickColor: '#666',

    tickPixelInterval: 30,
    tickWidth: 2,
    tickPosition: 'inside',
    tickLength: 10,
    tickColor: '#666',
    labels: {
        step: 2,
        rotation: 'auto'
    },
    title: {
        text: 'km/h'
    },
    plotBands: [{
        from: 0,
        to: 120,
        color: '#55BF3B' // green
    }, {
        from: 120,
        to: 160,
        color: '#DDDF0D' // yellow
    }, {
        from: 160,
        to: 200,
        color: '#DF5353' // red
    }]
},

series: [{
    name: 'Speed',
    data: [80],
    tooltip: {
        valueSuffix: ' km/h'
    }
}]

    };  

veriler.html

<chart class="my-gauge-chart" [options]="chartOptions" type="chart" ></chart>

你可以帮助这个帖子ionic 2 google charts Uncaught TypeError: (void 0) is not a function

【问题讨论】:

  • 错误的开头是This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts.。你确定你没有设置一些奇怪的类型吗?
  • 我添加了新的代码块,并使用了chartOptions 代码这个地址highcharts.com/demo/gauge-speedometer

标签: angular typescript highcharts ionic2


【解决方案1】:

类似于:

import Highmore from '../../node_modules/highcharts/highcharts-more.js';

可能还有this:

npm install highcharts-more --save

【讨论】:

  • 我在 veriler.ts 和 app.module.ts 上添加了但同样的错误
  • 谢谢兄弟,我解决了;添加 ChartModule.forRoot(highcharts,Highmore)
猜你喜欢
  • 2018-09-02
  • 1970-01-01
  • 1970-01-01
  • 2017-03-02
  • 2016-04-22
  • 2020-08-19
  • 1970-01-01
  • 1970-01-01
  • 2012-11-25
相关资源
最近更新 更多