在Ionic 2应用中实现Chart.js图表标签始终显示的技术求助

我来帮你搞定这个问题！之前在Ionic项目里用Chart.js的PieceLabel插件时也踩过类似的坑，按下面的步骤一步步来，应该就能让标签正常显示了：

1. 先把依赖装对 #

首先得确保你已经正确安装了Chart.js和Chart.PieceLabel.js这两个包，在项目根目录里跑下面的命令：

npm install chart.js chart.piecelabel.js --save

如果用yarn的话就换成：

yarn add chart.js chart.piecelabel.js

2. 正确注册插件到Chart.js #

Ionic 2基于Angular 2，插件必须先注册才能被Chart.js识别，有两种注册方式：

全局注册（推荐，整个项目都能用） #

打开src/app/app.module.ts，添加这些代码：

import * as Chart from 'chart.js';
import * as ChartPieceLabel from 'chart.piecelabel.js';

// 把PieceLabel插件注册到Chart.js里
Chart.plugins.register(ChartPieceLabel);

仅在单个组件里注册 #

如果只需要在某个组件用，比如你的app.component.ts，就在组件里导入并注册：

import { Component, OnInit } from '@angular/core';
import * as Chart from 'chart.js';
import * as ChartPieceLabel from 'chart.piecelabel.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // 注册插件
    Chart.plugins.register(ChartPieceLabel);
    // 接着创建你的环形图
    this.buildDoughnutChart();
  }

  buildDoughnutChart() {
    // 获取canvas元素
    const ctx = document.getElementById('doughnutChart') as HTMLCanvasElement;
    // 创建图表
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['红色', '蓝色', '黄色'],
        datasets: [{
          data: [300, 50, 100],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
      },
      options: {
        // 配置PieceLabel插件的显示规则
        pieceLabel: {
          render: 'percentage', // 可以选label/value/percentage，或者自定义函数
          fontColor: '#fff',
          fontSize: 14,
          precision: 1 // 百分比保留一位小数
        }
      }
    });
  }
}

3. 解决类型定义的坑 #

如果遇到“找不到模块”的报错，大概率是类型定义的问题。先装Chart.js的类型包：

npm install @types/chart.js --save-dev

至于Chart.PieceLabel.js，目前没有官方的@types包，你可以自己在src/typings.d.ts里加一段简单的声明：

declare module 'chart.piecelabel.js';

这样TypeScript就不会再报错了。

4. 确保Canvas元素正常渲染 #

别忘了在模板里加对应的Canvas元素，比如app.component.html里：

<canvas id="doughnutChart" width="400" height="400"></canvas>

5. 排查常见问题 #

• 如果标签还是不显示，检查options.pieceLabel的配置是否正确，比如render选项有没有写错，或者是不是字体颜色和背景色重合了。
• 要注意版本兼容！Chart.PieceLabel.js只支持Chart.js 2.x版本，Ionic 2通常配的就是2.x，别装错成3.x或者更高版本了。
• 如果是在Ionic页面里用，别在ngOnInit里创建图表，改用ionViewDidEnter钩子，因为Ionic页面的DOM可能在ngOnInit时还没完全加载好：

ionViewDidEnter() {
  this.buildDoughnutChart();
}

按这些步骤操作下来，应该就能成功加载插件，让环形图的标签正常显示啦！

内容的提问来源于stack exchange，提问作者Knives81