typescript - 在 Angular 2.0.0-beta-17 中使用时，ng2-charts 未显示在客户端

Question

我正在尝试ng2-charts在 Angular 2 应用程序中使用但遇到问题

应用程序.ts

 import {Component} from 'angular2/core';

    import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

    @Component({
        selector: 'my-app',
        template:

     `

<base-chart class="chart"
           [data]="barChartData"
           [labels]="barChartLabels"
           [options]="barChartOptions"
           [series]="barChartSeries"
           [legend]="barChartLegend"
           [chartType]="barChartType"
           (chartHover)="chartHovered($event)"
           (chartClick)="chartClicked($event)">
</base-chart>
`
})
export class AppComponent {
    constructor() {
        console.log('bar demo');
    }

    private barChartOptions = {
        scaleShowVerticalLines: false,
        responsive: true,
        multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
    };
    private barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    private barChartSeries = ['Series A', 'Series B'];
    public barChartType = 'Bar';
    private barChartLegend: boolean = true;

    private barChartData = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];

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

}

无问题显示

Answer 1

您需要在SystemJS配置属性中添加地图，否则 SystemJS 不知道从哪里加载它：

System.config({
  map: {
     'ng2-charts': 'node_modules/ng2-charts'
  },
  //...
});