2

我需要在我的项目中实现一些图表，内置 Angular2（版本 2.4.8），我使用 ng2-charts（版本 1.5.0），chart.js 使用的版本是 2.5.0。首先，我从 ng2-charts 网站复制了一个示例代码，我没有错误，但没有图表... ng2-charts 与 Angular2 的一些重大变化？

我使用图表的组件：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>

系统js：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 {
}

索引.html：

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

我已经尝试过使用 src/chart.js ，例如网站示例，但会出错（未定义要求）和 dist/Chart.js 但相同，也就是没有显示...

经过 4 小时的搜索后，我求助于您……一些想法？谢谢

4

1 回答 1

1

我找到了答案，这是因为我使用了一个外部库（mdbootstrap），它打破了一些依赖关系......我猜

谢谢

于 2017-03-02T07:57:01.403 回答