我也一直在寻找一个解决方案，最近在ChartjsNodeCanvas Github项目的一个正在进行的讨论线程下，一个贡献者发布了一个解决方案，可以在一个项目中直接使用Canvas和Chart.js，完全绕过ChartjsNodeCanvas。我花了一些实验来让它正确工作，但我现在已经将所有项目移出ChartjsNodeCanvas，并使用Chart.js 4.4.0。对于基础知识，您需要请求或导入依赖项：

const { Chart } = require("chart.js/auto");
const { createCanvas } = require("canvas");

字符串
接下来你需要设置各种Chart.js选项。在我的例子中，我使用了node_modules中的一个插件，我还有一个小插件用于设置画布背景颜色，我从ChartjsNodeCanvas中提取：

Chart.register(
  require("chartjs-plugin-datalabels"),
  {
    id: "BackgroundColor",
    beforeDraw: (chart) => {
      const { ctx } = chart;
      ctx.save();
      ctx.fillStyle = BackgroundColor;
      ctx.fillRect(0, 0, chart.canvas.width, chart.canvas.height);
      ctx.restore();
    }
  }
);

型
最后是图表的实际渲染。如果从Chart.js 3.x.x迁移，一些配置选项可能会改变。对于雷达图，我需要做一些小的属性更改，因为名称已经改变。此外，我发现“平均值比率：false”需要在选项下设置。当我使用ChartjsNodeCanvas时，这似乎是自动发生的（花了一段时间才弄清楚为什么我的图表看起来如此不对劲）。在我的例子中，我依赖于ChartjsNodeCanvas中的JavaScript方法来返回数据URL或缓冲区，所以我必须将画布例程 Package 在Promises中：

const canvas = createCanvas(Width, Height);
  const ctx = canvas.getContext("2d");
  const chart = new Chart(ctx, configuration);
  return new Promise((resolve, reject) => {
    canvas.toDataURL("image/png", (error, url) => {
      chart.destroy();
      if (error) {
        return reject(error);
      }
      return resolve(url);
    }, "image/png");
  });

型
对于缓冲区，我使用以下代码：

const canvas = createCanvas(Width, Height);
  const ctx = canvas.getContext("2d");
  const chart = new Chart(ctx, configuration);
  return new Promise((resolve, reject) => {
    canvas.toBuffer((error, buffer) => {
      chart.destroy();
      if (error) {
        return reject(error);
      }
      return resolve(buffer);
    }, "image/png");
  });

型
如果你不需要Promises，那么你可以简单地返回canvas.toBuffer（）或canvas.toDataURL（）数据。另外，如果你使用的是Typescript，我花了很长时间让Chart构造函数识别ctx值。我最终放弃了，并加强了输入：

const chart = new Chart(ctx as unknown as ChartItem, configuration);

型