angular 5 chart.js datalabels插件

Question

我在使用我的Angular 5应用程序中的图表正确运行datalabels插件时遇到了问题。

除了插件没有创建标签外，图表按预期显示。没有生成控制台错误，这似乎很奇怪。

我的导入部分看起来像：

import {Chart} from 'chart.js';
import 'chartjs-plugin-datalabels';

我的图表创建部分如下所示：

ngAfterViewInit() {
    this.canvas = document.getElementById(this.chartID);
    this.canvas.height = this.graphHeight;
    this.ctx = this.canvas.getContext('2d');


    this.myChart = new Chart(this.ctx, {
      type: 'horizontalBar',
      data: {
          labels: this.chartLabels,
          datasets: [{
              label: 'Percentage',
              data: this.chartValues,
              borderWidth: 1,
              backgroundColor: '#a32d31',
              datalabels: {
                align: 'end',
                anchor: 'start'
              }
          }]
      },
      options: {
        legend: {
          display: false
        },
        maintainAspectRatio: false,
        plugins: {
          datalabels: {
            color: 'white',
            font: {
              weight: 'bold'
            },
            formatter: Math.round
          }
        }
      }
    });

  }

在某些时候需要单独的步骤来注册插件（提供的示例没有显示）。任何想法或建议让这个工作？图表本身看起来很好，但插件输出不在那里。

Answer 1

希望这有助于其他人：

该错误是轴最小值未默认为零的结果。一旦将其应用于轴，所有功能都按预期进行。

Answer 2

我知道这与OP没有完全相同的问题，但我在Angular CLI上正确编译代码时遇到了一些麻烦。

angular.json：

{
  "projects": {
    "snowglobe-web": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js"

创建包含内容的index.d.ts文件：

declare module 'chartjs-plugin-datalabels'

导入如下：

import ChartDataLabels from 'chartjs-plugin-datalabels';