在角度种子中实现 ng2 图表

Question

我无法在我的应用程序中实现 ng2-charts 后(当我运行"npm run start.deving - 我可以看到图表，但它会失败 Karma UnitTesting - 在 ***.spec.ts 文件中(。

Answer 1

以下解决方案为我完成了工作(在通过npm安装ng2-charts和charts之后.js(：

在主模块中导入图表模块(例如"home.module.ts"(：

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

然后 - 提供它以让其他组件(在此模块内(使用此模块(在您的等效"...spec.ts"文件(例如"home.component.spec.ts"(：

@NgModule({
imports:[ChartsModule,...]
)}

• 修复 Karma UnitTesting 和 AOT 编译，方法是将以下内容修改到project.config.ts

--

this.ROLLUP_NAMED_EXPORTS = [
...this.ROLLUP_NAMED_EXPORTS,
{'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']}
]
let additionalPackages: ExtendPackages[] = [
// required for dev build 
{
name: 'ng2-charts/ng2-charts',
// Path to the package's bundle
path: 'node_modules/ng2-charts/bundles/ng2-charts.umd.min.js'
}, 

为了确保安全，我添加了实际的图表实现组件(例如"line-chart.component.ts"(：

import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['line-chart.component.css'],
})
export class LineChartComponent {
// lineChart
public lineChartData:Array<any> = [
{data: [28, 48, 40, 19, 110, 27, 120, 28, 48, 40, 19, 110, 27, 60, 120, 28, 48, 40, 19, 110, 27, 120, 28, 48, 40, 19, 110, 27, 60, 120], label: ''}
];
public lineChartLabels:Array<any> = ['', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', '', '', ''];
public lineChartOptions:any = {
scales: { // remove grid lines
xAxes: [{
display: false,
gridLines: {
display:false
}
}],
yAxes: [{
display: false,
gridLines: {
display:false
}
}]
},    
responsive: true,
legend: {display:false}
};
public lineChartColors:Array<any> = [
{
backgroundColor: 'transparent',
borderColor: '#9C0100',
pointBackgroundColor: '#7E0001',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';
public randomize():void {
let _lineChartData:Array<any> = new Array(this.lineChartData.length);
for (let i = 0; i < this.lineChartData.length; i++) {
_lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
for (let j = 0; j < this.lineChartData[i].data.length; j++) {
_lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
}
}
this.lineChartData = _lineChartData;
}
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
}

并在每个组件(即模块的一部分(中使用它：

<line-chart></line-chart>

Answer 2

我没有在我的 Angular 6.1 网站中使用 ng2-chart;但是，我在 mgechev/angular-seed 中使用 chart.js 本身。 我决定我不需要或不想要额外的 ng2 图表包装器。 最后，无论如何.js您实际上只是在使用图表。

在撰写此回复时，Chart.js开发人员需要做一些工作，以使导出其成员符合更新的标准。

要使 Chart.js 正常工作，您需要做的就是：

1. 更新project.config.ts以包含ROLLUP_NAMED_EXPORTS

   this.ROLLUP_NAMED_EXPORTS = [
   ...this.ROLLUP_NAMED_EXPORTS,
   { 'node_modules/chart.js/src/chart.js': ['Chart'] }
   ];
   

2. 更新project.config.ts以包含其他包

   // Add packages
   const additionalPackages: ExtendPackages[] = [
   { name: 'chart.js', path: 'node_modules/chart.js/dist/Chart.bundle.min.js' },
   ...
   ];
   

3. 在您的组件中

   import { Chart } from 'chart.js';
   ...
   export class MyComponent implements OnInit {
   @ViewChild('myChart') myChartRef: ElementRef;
   chartObj: Chart;
   ...
   }
   

   然后在每个图表.js文档中加载 ngOnInit(( 中的图表配置

4. HTML 将如下所示：

   <div class="chart-container">
   <canvas #myChart></canvas>
   </div>