在角度2.0.0-beta-17中使用时，客户端不显示ng2-charts图表

Question

我正在尝试在角度2应用中使用ng2-charts但面临问题

app.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'
  },
  //...
});