使用chartjs-node-canvas后端生成图表报错：this._chartJs is not a constructor

核心原因 #

你碰到的错误确实是版本冲突导致的：chartjs-node-canvas 3.2.0仅兼容Chart.js 3.x系列，不支持你当前使用的Chart.js 4.2.0。Chart.js 4.x做了模块结构的重大调整，导致旧版的chartjs-node-canvas无法正确初始化Chart实例。

解决方案 #

方案1：降级Chart.js到兼容版本 #

卸载当前的Chart.js，安装3.x的稳定版（比如3.9.1）：

npm uninstall chart.js
npm install chart.js@3.9.1

这种方案不需要修改现有代码的配置逻辑，直接适配原有写法。

方案2：升级chartjs-node-canvas到支持Chart.js 4.x的版本 #

chartjs-node-canvas 4.x及以上版本已经适配了Chart.js 4.x，执行升级命令：

npm uninstall chartjs-node-canvas
npm install chartjs-node-canvas@latest

但升级后需要同步修改你的图表配置，因为Chart.js 4.x（及3.x）已经废弃了yAxes数组写法，改用单轴配置：

options: {
  scales: {
    y: { // 替换原来的yAxes数组
      ticks: {
        beginAtZero: true,
        callback: (value) => '$' + value
      }
    }
  }
}

修正后的完整代码（以方案2为例） #

const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const width = 400;
const height = 400;
const chartCallback = (ChartJS) => {};
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback });

(async () => {
  const configuration = {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        y: { // 修正为单轴配置
          ticks: {
            beginAtZero: true,
            callback: (value) => '$' + value
          }
        }
      }
    }
  };
  const image = await chartJSNodeCanvas.renderToBuffer(configuration);
  const dataUrl = await chartJSNodeCanvas.renderToDataURL(configuration);
  const stream = chartJSNodeCanvas.renderToStream(configuration);
})();

内容的提问来源于stack exchange，提问作者Hamza