javascript - 如何在 chartjs-node-canvas 中使用 pointStyle 和图像？

Question

我正在尝试使用 pointStyle 渲染带有图像的图表。我在客户端实现了这个图表并且它工作正常但是当我尝试使用nodejs（SSR）呈现图表时，它只显示没有图像的图表。

Nodejs 代码

var express = require("express");
const { Canvas, loadImage } = require("canvas");
const { CanvasRenderService } = require("chartjs-node-canvas");


var router = express.Router();

async function initChartData() {
  const img = await loadImage("https://i.imgur.com/yDYW1I7.png");
  const canvas = new Canvas(img.width, img.height);
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  console.log('<img src="' + canvas.toDataURL() + '" />');

  const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
      {
        label: "Tokyo",
        fill: false,
        borderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointRadius: 5,
        pointStyle: '<img src="' + canvas.toDataURL() + '" />', // or ['',img,'','','','']
        data: [0, 7, 8, 14, 18, 22],
      },
    ],
  };

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

const mkChart = async (params) => {
  const conf = await initChartData();
  const canvasRenderService = new CanvasRenderService(400, 400);
  return await canvasRenderService.renderToBuffer(conf);
};

router.get("/", async function (req, res, next) {
  var image = await mkChart(req.query);
  res.type("image/png");
  res.send(image);
});

module.exports = router;

包.json

  "dependencies": {
    "canvas": "^2.8.0",
    "chart.js": "^3.5.1",
    "chartjs-node-canvas": "^3.2.0",
    "cookie-parser": "~1.4.4",
    "express": "~4.16.1",
  }

客户端演示：https ://jsfiddle.net/3t1qguy7/1/ 存储库https://github.com/ahmedosamaalam/node-chartjs/tree/main

标签： javascriptnode.jscanvaschart.js