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

Question

我正在尝试在 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/[email protected]"></script>

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

Answer 1

显然版本3.X.X有几个添加插件的错误，我按照这个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'))
  }
});

Answer 2

在版本

4.x.x

中，连接新插件最安全：

const canvas = new ChartJSNodeCanvas({
width: 400,
height: 400,
backgroundColour: "white",
plugins: {
  /** Add plugins here **/
  modern: ["chartjs-plugin-datalabels"],
 }
})

因为通过

ChartJS.register(require('plugin-name'))

的方法是不安全的，可能会导致各种错误，就像我的例子一样。开发人员正在谈论它

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2