Node.js 在ChartJS节点画布上使用Datalabels和ChartJS

我使用NodeJS和将图形直接渲染到文件，效果很好

我是通过安装npm模块来完成的

为了在图形上显示标签，我使用了官方的ChartJS插件

但看起来Canvas模块有一个不同的激活ChartJS插件的方案，我很可能错误地激活了datalabels插件。所以我无法在图表上显示标签

const Chart = require('chart.js');
const datalabels = require('chartjs-plugin-datalabels')
const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 600;
const height = 400;
const chartCallback = (ChartJS) => {

    ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
    ChartJS.plugins.register({
        datalabels
    });
};

const canvasRenderService = new CanvasRenderService(width, height, chartCallback);

(async () => {
    const configuration = {
        type: 'bar',
        data: {
            datasets: [
                {
                    type:"bar",
                    barThickness: 24,
                    label: 'My dataset',
                    data: ydata['data'],
                    backgroundColor: 'rgba(75,192, 192, 0.2)',
                    borderColor: 'rgba(54, 162, 135, 0.2)',
                    borderWidth: 1,
                    datalabels: {
                        align: 'start',
                        anchor: 'start'
                    }
                }, 
                labels: xdata,
            }

        options: {
            scales: {
                yAxes: [
                    {
                        id: 'left-y-axis',
                        position: 'left',
                        stacked: false,
                        ticks: {
                            beginAtZero: true,
                            callback: (value) => value + "R"
                        },
                    },
                    {
                        id: 'right-y-axis',
                        position: 'right'
                    }
                ],
                xAxes: [{
                    stacked: true,

                }]
            },
            plugins: {
                datalabels: {
                    backgroundColor: function(context) {
                        return context.dataset.backgroundColor;
                    },
                    borderRadius: 4,
                    color: 'red',
                    font: {
                        weight: 'bold'
                    },
                    formatter: Math.round
                }
              }
         }
    };
    const image = await canvasRenderService.renderToBuffer(configuration);
    fs.writeFileSync(tgMsgPath+"test.png", image)        
})();

---

图表显示，但图表上没有标签。

这是如何使用ChartJs niode画布激活插件：

const Chart = require('chart.js');
const datalabels = require('chartjs-plugin-datalabels')
const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 600;
const height = 400;
const chartCallback = (ChartJS) => {

    ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
    ChartJS.plugins.register({
        datalabels
    });
};

const canvasRenderService = new CanvasRenderService(width, height, chartCallback);

(async () => {
    const configuration = {
        type: 'bar',
        data: {
            datasets: [
                {
                    type:"bar",
                    barThickness: 24,
                    label: 'My dataset',
                    data: ydata['data'],
                    backgroundColor: 'rgba(75,192, 192, 0.2)',
                    borderColor: 'rgba(54, 162, 135, 0.2)',
                    borderWidth: 1,
                    datalabels: {
                        align: 'start',
                        anchor: 'start'
                    }
                }, 
                labels: xdata,
            }

        options: {
            scales: {
                yAxes: [
                    {
                        id: 'left-y-axis',
                        position: 'left',
                        stacked: false,
                        ticks: {
                            beginAtZero: true,
                            callback: (value) => value + "R"
                        },
                    },
                    {
                        id: 'right-y-axis',
                        position: 'right'
                    }
                ],
                xAxes: [{
                    stacked: true,

                }]
            },
            plugins: {
                datalabels: {
                    backgroundColor: function(context) {
                        return context.dataset.backgroundColor;
                    },
                    borderRadius: 4,
                    color: 'red',
                    font: {
                        weight: 'bold'
                    },
                    formatter: Math.round
                }
              }
         }
    };
    const image = await canvasRenderService.renderToBuffer(configuration);
    fs.writeFileSync(tgMsgPath+"test.png", image)        
})();

const chartJsFactory = () => {
const Chart = require('chart.js');
require('chartjs-plugin-datalabels');
delete require.cache[require.resolve('chart.js')];
delete require.cache[require.resolve('chartjs-plugin-datalabels')];
return Chart;
}

// ...

const canvasRenderService = new CanvasRenderService(
  chartWidth,
  chartHeight,
  chartCallback,
  undefined,
  chartJsFactory
);

---

以下是如何使用ChartJs niode画布激活插件：

const chartJsFactory = () => {
const Chart = require('chart.js');
require('chartjs-plugin-datalabels');
delete require.cache[require.resolve('chart.js')];
delete require.cache[require.resolve('chartjs-plugin-datalabels')];
return Chart;
}

// ...

const canvasRenderService = new CanvasRenderService(
  chartWidth,
  chartHeight,
  chartCallback,
  undefined,
  chartJsFactory
);