Question

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

Answer 1

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

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

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

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

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

修复Karma UnitTesting＆amp;通过修改以下 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-charts；但是，我在mgechev/angular-seed中单独使用chart.js。我决定不需要或不需要额外的ng2-chart包装器。最后，您实际上还是在使用chart.js。

在撰写此回复时，Chart.js开发人员have some work to do使其导出的成员符合新标准。

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

更新project.config.ts以包括ROLLUP_NAMED_EXPORTS

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

更新project.config.ts以包括其他软件包

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

  ...

];

在您的组件中

import { Chart } from 'chart.js';

...

export class MyComponent implements OnInit {

@ViewChild('myChart') myChartRef: ElementRef;
chartObj: Chart;

...
}
然后按照Chart.js documentation在ngOnInit（）中配置负载图

HTML看起来像这样：

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

在Angular-Seed中实现ng2-charts

2 个答案: