Angular2 및 ng2 차트에 그래프가 표시되지 않습니다.

Angular2 (버전 2.4.8)로 빌드 된 일부 차트를 구현해야하며 ng2 차트 (버전 1.5.0) 및 차트에 사용 된 버전을 사용합니다 .js는 2.5.0입니다. 시작하려면 ng2-charts 웹 사이트의 예제 코드를 복사했는데 오류가 없지만 차트가 없습니다 ... Angular2가있는 ng2 차트의 일부 변경 사항이 있습니까? HomeComponent.tsAngular2 및 ng2 차트에 그래프가 표시되지 않습니다.

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 시간 동안 검색을 한 후에 ... 몇 가지 아이디어가 있습니까? 내가 약간의 종속성을 깰 외부 LIB (mdbootstrap를) 느릅 나무 사용하기 때문에 감사

내가 대답을 발견

출처

2017-03-01 Maxime De Sogus

것 같아요 ...입니까? – Sajeetharan

아무것도 ... 로그에 대해 완전히 명확합니다. –

, 그것은 내가

감사

당신이 콘솔에서 오류를 볼 수 있습니까

출처

2017-03-02 07:57:01

내 프로젝트에 통합하면 작동합니까? – heman123

Angular2 및 ng2 차트에 그래프가 표시되지 않습니다.

답변

관련 문제