ng2-charts\\\<br/>g2-charts.js不会导出ChartsModule [英] ng2-charts\ng2-charts.js does not export ChartsModule

问题描述

我正在尝试使用NG2-Charts的基本示例（ http：// valor-software。 com / ng2-charts / ）

I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)

我复制粘贴HTML部分

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>

和TypeScript部分

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;
 */
 }

我运行npm install ng2-charts --save ，npm install chart.js --save

I run npm install ng2-charts --save, npm install chart.js --save

我还在app.module.ts中导入ChartsModule

I also import ChartsModule in app.module.ts

import { ChartsModule } from 'ng2-charts/ng2-charts';
@NgModule({
  imports: [ChartsModule]
})

导入ChartsModule后，我收到错误 ng2-charts \ ng2 -charts.js不会导出ChartsModule。
点击查看错误图像

有没有人有一个关于如何解决这个问题的想法？
谢谢

Does anyone has an idea on how to fix that? Thank you

推荐答案

评论中的第二个问题

它还显示错误无法绑定到'数据集'，因为它
不是'canvas'的已知属性

It is also showing an error that "Can't bind to 'datasets' since it isn't a known property of 'canvas'

可能是因为没有将ChartsModule导入到呈现图表的模块中。

is probably due to not importing ChartsModule into the module that is rendering the chart.

我遇到了同样的情况最初的问题，并通过将以下内容添加到我的rollup-config文件中来实现它

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()
]

这个库的文档可能更好。我遇到了一些其他的问题，我也做了发表于 http://spartansoft.net/installing-ng2 -charts-for-an-angular-4-project /

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

这篇关于ng2-charts\\\<br/>g2-charts.js不会导出ChartsModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！