chart.js - 在 Angular-Seed 中实现 ng2-charts

Question

我无法在Angular Seed中编译生产 AOT 构建（“npm run build.prod.rollup.aot”） - 在我的应用程序中实现ng2-charts之后（当我运行“npm run start.deving - 我本来可以看到图表，但 Karma UnitTesting 会失败 - 在 ***.spec.ts 文件中）。

Answer 1

我没有在我的 Angular 6.1 网站中使用 ng2-charts；但是，我在mgechev/angular-seed中单独使用 chart.js 。我决定不需要或不需要额外的 ng2-charts 包装器。最后，无论如何，您实际上只是在使用 chart.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;
   
   ...
   }
   

   然后根据Chart.js 文档在 ngOnInit() 中加载图表配置

4. HTML 看起来像这样：

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

Answer 2

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

在您的主模块中导入ChartsModule（例如“home.module.ts”）：

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

然后 - 提供它以让其他组件（位于此模块内）使用此模块（在等效的“...spec.ts”文件中执行相同操作（例如“home.component.spec.ts”）：

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

• 通过将以下内容修改到您的project.config.ts来修复 Karma UnitTesting 和 AOT 编译

--

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>