ChartJS插件数据标签在Ionic 3上不显示标签

Question

我正在使用 Ionic 3，我正在显示一个条形图，我需要在图表上的条形旁边显示数据标签，就像这个问题如何在图表上显示数据值一样.js

我按照到目前为止为 chartjs-plugin-datalabels 找到的说明进行操作，但不起作用，它没有在我的图表上显示任何数据标签。

我通过 npm 安装了 chartjs 和 chartjs-plugin-datalabels，它们在我的包中看起来像这样.json

"chart.js": "^2.7.3",
"chartjs-plugin-datalabels": "^0.5.0",

我按照文档对 https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#integration 所说的那样进行了导入，但是导入行

import { ChartDataLabels } from 'chartjs-plugin-datalabels'; 

在 VSCode 编辑器中显示为"'图表数据标签'已声明，但其值从未读取">

我还在"选项"中添加了一个"插件"参数，就像文档所说的那样，但仍然没有显示任何数据标签。

这是我的代码摘录。

import { Component, ViewChild, ɵConsole } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, App } from 'ionic-angular';
import { Chart } from 'chart.js';  
import { ChartDataLabels } from 'chartjs-plugin-datalabels';

@ViewChild('barCanvas') barCanvas;
ionViewDidLoad() {
 this.barChart = new Chart(this.barCanvas.nativeElement, {
  type: 'bar',
  data: {
    labels: [..],
    datasets: [
      {
        label: "Ok",
        data: arrayOk,
        backgroundColor: '#014582',
        borderWidth: 1,
        datalabels: {
          align: 'end',
          anchor: 'start'
        }
      },
      {
        label: "Not Okay",
        data: arrayNotOk,
        backgroundColor: '#777676',
        borderWidth: 1,
        datalabels: {
          align: 'center',
          anchor: 'center'
        }
      }],
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        display: function (context) {
          return context.dataset.data[context.dataIndex] > 1;
        },
        font: {
          weight: 'bold'
        },
        formatter: Math.round,
        title: false
      }
    },
    title: {
      display: true,
      position: "top",
      text: "My Bar Chart with Datalabels",
      fontSize: 18,
      fontColor: "#111"
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false
        }
      }]
    },
    legend: false
  }
});
}

Answer 1

尝试启用插件

    var chart = new Chart(ctx, {
        plugins: [ChartDataLabels],
        options: {
            // ...
        }
    })

Answer 2

我通过添加一个属性并在类构造函数中传递给它 ChartLabel 插件属性来解决我的问题。

import { Chart } from 'chart.js';
import { ChartDataLabels } from 'chartjs-plugin-datalabels';
export class Chart {
  chartLabels: any;
  constructor( ... ){
    this.chartLabels = ChartDataLabels;
  }
}