如何在chartjs-node-canvas中使用pointStyle配置自定义图片点样式

node环境下运行的Chart.js不支持解析HTML <img> 标签字符串作为pointStyle参数，你在客户端可用的写法不兼容SSR场景：

• 浏览器环境下Chart.js会自动解析DOM元素、img标签字符串作为自定义标记
• chartjs-node-canvas依赖的node-canvas库只识别loadImage方法返回的原生Image实例作为图片类型的pointStyle参数

直接将loadImage加载得到的img实例赋值给pointStyle即可，无需额外转canvas、拼接img标签：
修改initChartData函数中数据集的pointStyle配置：

// 原错误写法
// pointStyle: '<img src="' + canvas.toDataURL() + '" />', 
// 修复后写法
pointStyle: img,
// 若需要给不同点位单独设置样式，可直接传入数组：
// pointStyle: [img, 'circle', img, 'rect', 'triangle', 'circle'],

同时可以根据图片实际尺寸调整pointRadius参数，避免图片被拉伸变形。

async function initChartData() {
  const img = await loadImage("https://i.imgur.com/yDYW1I7.png");
  const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
      {
        label: "Tokyo",
        fill: false,
        borderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointRadius: 8, // 根据图片尺寸调整半径
        pointStyle: img, // 直接传入loadImage返回的实例
        data: [0, 7, 8, 14, 18, 22],
      },
    ],
  };

  const configuration = {
    type: "line",
    data: data,
    options: {
      responsive: false,
      animation: false,
      maintainAspectRatio: false,
    },
  };
  return configuration;
}

修改完成后重启服务，访问对应路由即可正常渲染带自定义图片标记的图表。

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