如何在 chartjs-node-canvas 中实现 chartjs-plugin-datalabels？答案

【问题标题】：How could I implement chartjs-plugin-datalabels in chartjs-node-canvas?如何在 chartjs-node-canvas 中实现 chartjs-plugin-datalabels？
【发布时间】：2021-07-08 17:58:27
【问题描述】：

我正在尝试在 Node.js 中使用 chartjs-node-canvas 实现 ChartJS Datalabels。这是我当前的代码

import ChartDataLabels from 'chartjs-plugin-datalabels';
import { ChartJSNodeCanvas } from 'chartjs-node-canvas'

    public async generateChart(width: number, height: number, type: string = 'bar', data, options): Promise<Buffer> {
        const chartCallback = (ChartJS) => {
            ChartJS.plugins.register(ChartDataLabels);
        };
        const chartJSNodeCanvas: ChartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback})
        const configuration: any =
        {
            type: type,
            data: data,
            options: options
        };
        const image = await chartJSNodeCanvas.renderToBuffer(configuration);
        return image
    }

我尝试了各种方法，但我无法找到最佳解决方案

// Option 1
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
    requireLegacy: ['chartjs-plugin-datalabels']
} });

// Option 2
const chartCallback = (ChartJS) => {
    ChartJS.plugins.register(ChartDataLabels);
};
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback });

但我无法使用 Datalabels 生成 PDF，尽管我在不使用插件的情况下生成了 PDF。错误是

System.Private.CoreLib: Exception while executing function: Functions.test1. System.Private.CoreLib: Result: Failure
Exception: TypeError: Cannot read property 'register' of undefined
Stack: TypeError: Cannot read property 'register' of undefined
    at ChartJSNodeCanvas.initialize (C:\project\node_modules\chartjs-node-canvas\dist\new.js:172:33)
    at new ChartJSNodeCanvas (C:\project\node_modules\chartjs-node-canvas\dist\new.js:27:30)
    at ReportLpi.<anonymous> (C:\project\dist\src\services\report_lpi.js:1121:39)
    at Generator.next (<anonymous>)

变量type, data, options与下一段代码相同。

var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["a", "b", "c", "d", "e", "f"],
    datasets: [
      {
        type: "bar",
        backgroundColor: "blue",
        borderColor: "blue",
        borderWidth: 1,
        label: "promedio",
        order: 1,
        data: [60, 49, 72, 90, 100, 60],
                    datalabels: {
                        align: 'end',
                        anchor: 'end'
                    }
      },
      {
        type: "bar",
        backgroundColor: "orange",
        borderColor: "orange",
        borderWidth: 1,
        label: "promedio",
        order: 1,
        data: [40, 5, 20, 30, 10, 6],
                    datalabels: {
                        align: 'end',
                        anchor: 'end'
                    }
      },
      {
        type: "line",
        label: "casos",
        data: [25, 13, 30, 35, 25, 40],
        lineTension: 0,
        backgroundColor: "red",
        borderColor: "red",
        order: 0,
        fill: false,
                    datalabels: {
                        align: 'end',
                        anchor: 'end'
                    }
      }
    ]
  },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
        legend: {
          display: false
        },
        plugins: {
      datalabels: {
                    backgroundColor: function(context) {
                        return context.dataset.backgroundColor;
                    },
                    borderRadius: 4,
                    color: 'white',
                    font: {
                        weight: 'bold'
                    },
                }
    }
      }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

<body>
  <canvas id="myChart" width="400" height="200"></canvas>
</body>

【问题讨论】：

标签： javascript node.js canvas plugins chart.js

【解决方案1】：

显然3.X.X版本有几个bug要添加插件，我按照这个Issues解决了

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';

const canvas = new ChartJSNodeCanvas({
  width: 700,
  height: 400,
  chartCallback: (ChartJS) => {
    /** Add plugins here **/
    ChartJS.register(require('chartjs-plugin-datalabels'))
  }
});

【讨论】：