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

通过

安装chartjs-plugin-datalabel

npm install chartjs-plugin-datalabels --save

然后将相同的内容导入

import ChartDataLabels from 'chartjs-plugin-datalabels';

并添加

labels:[]
..
datasets[]
..
plugin:[ChartDataLabels]

这对我有用。希望它能工作。

Answer 2

希望这有助于其他人：

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

Answer 3

我知道这与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';

angular 5 chart.js datalabels plugin

3 个答案: