2017-08-01 1 views
0

Ich möchte highchart Lehre auf mein Projekt hinzuzufügen, aber ich gebeionische 2 Uncaught (in Versprechen): Fehler: Highcharts Fehler # 17: www.highcharts.com/errors/17

Uncaught (in promise): Error: Highcharts error #17: www.highcharts.com/errors/17 error

es gesagt mich ; laden die highcharts-more.js Datei, aber ich weiß nicht, wie ich

ich gesucht laden kann, aber ich konnte nicht alles

Thanx bis jetzt

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

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> 

Und Sie können ionic 2 google charts Uncaught TypeError: (void 0) is not a function

+0

Der Beginn des Fehlers ist 'Dieser Fehler tritt auf, wenn Sie legen chart.type oder series.type auf einen Serientyp fest, der nicht in Highcharts definiert ist.'. Bist du sicher, dass du keinen seltsamen Typ einstellst? – Axnyff

+0

Ich füge neue Codeblöcke hinzu und ich habe chartOptions codes diese Adresse https://www.highcharts.com/demo/gauge-speedometer –

Antwort

1

Etwas ähnlich zu diesem Beitrag helfen:

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

Und möglicherweise this:

npm install highcharts-more --save 
+0

Ich fügte hinzu auf veriler.ts und app.module.ts aber gleichen Fehler –

+0

Thanx bro, I gelöst; ChartModule.forRoot hinzufügen (Highcharts, Highmore) –

Verwandte Themen