Chart.js 以角度种子实现ng2图表

在我的应用程序中实现后，我无法在中编译生产AOT构建（“npm run build.prod.rollup.AOT”）（当我运行“npm run start.deving”时，我可以看到图表，但在***.spec.ts文件中，Karma单元测试将失败）。

以下解决方案为我解决了问题（通过npm安装ng2 chart&charts.js后）：

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

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

• 通过将以下内容修改到您的project.config.ts

--

为了确保这一点，我添加了实际的图表实现组件（例如“linechart.component.ts”）：

从'@angular/core'导入{Component}；
@组成部分({
moduleId:module.id，
选择器：'折线图'，
templateUrl:'./linechart.component.html'，
样式URL:['line-chart.component.css']，
})
导出类LineChartComponent{
//线条图
公共lineChartData:数组=[
{数据：[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]，标签：'}
];
公共线形图标签：数组=[“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、；
公共线形图选项：任意={
缩放：{//删除网格线
xAxes：[{
显示：假，
网格线：{
显示：假
}
}],
雅克斯：[{
显示：假，
网格线：{
显示：假
}
}]
},    
回答：是的，
图例：{显示：错误}
};
公共LineChartColor:数组=[
{
背景色：“透明”，
边框颜色：'#9C0100'，
pointBackgroundColor:“#7E0001”，
pointBorderColor:“#fff”，
pointHoverBackgroundColor:“#fff”，
pointHoverBorderColor:'rgba（148159177,0.8）'
}
];
公共线形图表图例：布尔值=真；
公共lineChartType:string='line'；
public randomize（）：void{
让_lineChartData:Array=新数组（this.lineChartData.length）；
for（设i=0；i

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

---

我在Angular 6.1网站中没有使用ng2图表；但是，我在中单独使用了chart.js。我决定不需要或不想要额外的ng2图表包装器。最后，你实际上只是在使用chart.js

在编写此响应时，Chart.js开发人员需要使导出其成员符合更新的标准

要使Chart.js正常工作，只需执行以下操作：

更新

project.config.ts

以包括已命名的汇总导出

更新

project.config.ts

以包含其他包

在您的组件中

然后根据在ngOnInit（）中加载图表配置

HTML将如下所示：

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

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

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'
  }, 

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>

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

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

...
}

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