2017-03-01 25 views
2

Angular2(バージョン2.4.8)で構築されたいくつかのグラフを実装する必要があります.ng2-charts(バージョン1.5.0)とチャートのバージョン.jsは2.5.0です。 開始するには、ng2-chartsウェブサイトのサンプルコードをコピーしましたが、エラーはありませんが、グラフはありません... Angular2でng2-chartsにいくつかの変更がありましたか?Angular2とng2-chartsにグラフが表示されない

チャートを使用して私のコンポーネント:HomeComponent.ts

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

@Component({ 
    selector: 'pulpe-home-cmp', 
    templateUrl: './app/components/Home/HomeView.html' 
}) 
export class HomeComponent { 

    constructor(){ 
     console.log(VERSION.full) 
    } 

    // Doughnut 
    public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales']; 
    public doughnutChartData:number[] = [350, 450, 100]; 
    public doughnutChartType:string = 'doughnut'; 

    // events 
    public chartClicked(e:any):void { 
     console.log(e); 
    } 

    public chartHovered(e:any):void { 
     console.log(e); 
    } 
} 

ビュー:HomeView.html

<div style="display: block"> 
    <canvas baseChart 
     [data]="doughnutChartData" 
     [labels]="doughnutChartLabels" 
     [chartType]="doughnutChartType" 
     (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">                         
    </canvas> 
</div> 

Systemjs:systemjs.config.js

map: { ... 
    'ng2-charts': 'node_modules/ng2-charts' 
}, 
package : { 
    'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js' } 
} 

マイアプリモジュール: app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { PulpeAppComponent } from './app.component'; 
import { HomeComponent } from './components/Home/HomeComponent'; 
import { MenuBarComponent } from './components/MenuBar/MenuBarComponent'; 
import { SigninComponent } from './components/Signin/SigninComponent'; 
import { RouterModule } from '@angular/router' 
import { ROUTES } from './app.routes'; // ROUTING HERE! 
import { APP_BASE_HREF } from '@angular/common'; 
import { ChartsModule } from 'ng2-charts'; 

@NgModule({ 
    imports: [BrowserModule, RouterModule.forRoot(ROUTES), ChartsModule], 
    declarations: [ 
     PulpeAppComponent, 
     MenuBarComponent, 
     HomeComponent, 
     SigninComponent 
    ], 
    bootstrap: [PulpeAppComponent], 
    providers:[ 
     {provide: APP_BASE_HREF, useValue : '/' } 
    ] 
}) 
export class PulpeModule { 
} 

のindex.html:

<script src="node_modules/chart.js/dist/Chart.bundle.js"></script> 

私はウェブサイトの例のようにSRC/chart.jsで試してみたが、それがエラーをする(必要が定義されていない)とDIST/Chart.js同じで、別名何も表示されません...

私はあなたに回って4時間後...いくつかのアイデア?おかげ

+1

を推測するのですか? – Sajeetharan

+0

何もない...ログについて完全にはっきりしています –

答えて

1

が、私は答えを見つけた私は、外部のlib(mdbootstrap)は、いくつかの依存関係を壊すWICH使用しているため、それは...私はあなたがコンソールですべてのエラーを参照してくださいか

おかげ

+0

これは私のプロジェクトに統合するとうまくいくはずですか? – heman123

関連する問題