问题
I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)
I copy pasted the HTML part
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
and the TypeScript part
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[] =
['2006', '2007', '2008', '2009', '2010','2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
public randomize():void {
// Only Change 3 values
let data = [
Math.round(Math.random() * 100),
59,
80,
(Math.random() * 100),
56,
(Math.random() * 100),
40];
let clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = data;
this.barChartData = clone;
/**
* (My guess), for Angular to recognize the change in the dataset
* it has to change the dataset variable directly,
* so one way around it, is to clone the data, change it and then
* assign it;
*/
}
I run npm install ng2-charts --save, npm install chart.js --save
I also import ChartsModule in app.module.ts
import { ChartsModule } from 'ng2-charts/ng2-charts';
@NgModule({
imports: [ChartsModule]
})
After importing ChartsModule I am getting an error that ng2-charts\ng2-charts.js does not export ChartsModule. Click to view the image of an error
Does anyone has an idea on how to fix that? Thank you
回答1:
The second issue in the comments
It is also showing an error that "Can't bind to 'datasets' since it isn't a known property of 'canvas'
is probably due to not importing ChartsModule into the module that is rendering the chart.
I had encountered the same initial issue and was able to get past it by adding the following to my rollup-config file
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: ['node_modules/rxjs/**','node_modules/ng2-charts/**'],
namedExports: {'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']}
}),
uglify()
]
The documentation for this library could have been better. I encountered a few other issues as well which I documented at http://spartansoft.net/installing-ng2-charts-for-an-angular-4-project/
I hope the post can help anyone encountering similar issues
来源:https://stackoverflow.com/questions/40032174/ng2-charts-ng2-charts-js-does-not-export-chartsmodule