Angular完整项目开发13 - 使用图表（ng2-charts+chart.js）

Angular项目原型的主体功能差不多了，接下来添加一些其他功能，从图表开始。

图表的库有多种选择，我选了ng2-chart，这名字听上去就是给Angular御用的，虽然实际做下来发现坑不少。

1.安装ng2-charts和chart.js

这一步巨坑，如果直接安装，默认会用最新版本，然后各种报错，折腾了三个晚上。最后发现居然是版本不兼容，所以只能指定版本安装。坑！

npm install ng2-charts@2.3.0 --save
npm install chart.js@2.9.3 --save
npm install chartjs-plugin-datalabels --save //显示图表中的数值

2.引用chart与组织数据

app.module.ts

import { ChartsModule } from 'ng2-charts';
...
imports: [
   ...
   ChartsModule
]

stat.component.ts   其中涉及到data label的部分（chartjs-plugin-datalabels），不能直接用ng2-charts的官方demo，要修改写法，如下。又折腾了两个小时。坑！

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label, Color } from 'ng2-charts';
/*注意，下面datalabel的引用和ng2-charts官方例子写法不一样，不能用花括号。
  这里的 pluginDataLabels是随便起的名字，改成ABC都可以。*/
import  pluginDataLabels  from 'chartjs-plugin-datalabels';
//import  {pluginDataLabels}  from 'chartjs-plugin-datalabels';
...
public barChartOptions: ChartOptions = {
    responsive: true, 
    scales: {
      xAxes: [{}],
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[] = ['古里', '碧溪', '支塘', '沙家浜', '虞山', '梅李'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels]; //显示每一列的数值
  public barChartColors: Color[] = [
    { backgroundColor: '#5DB4EE' } //可放多个颜色
  ]
  
  public barChartData: ChartDataSets[] = [
    { data: [3, 5, 2, 3, 8, 2], label: '设备数量' } //可放多个系列
  ];

stat.component.html

<div style="display: block;width: 600px; height: 400px;"> 
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [colors]="barChartColors"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

效果：

 

参考：

https://valor-software.com/ng2-charts/#/BarChart

https://stackoverflow.com/questions/66936633/chart-js-ng2-charts-not-working-on-angular2