如何在node js中设置图表js的背景色

Question

无法为图表js设置背景颜色

我正在创建一个应用程序，我将在其中共享图表到slack，我使用节点画布和图表js在后端创建图表，我生成图像但背景是透明的，我需要它是白色的，我该怎么做，

下面是代码

import { createCanvas } from "canvas"
import {Chart, registerables} from "chart.js"

Chart.register(...registerables)

function createChart(options) {
    console.log(JSON.stringify(options));
    const canvas = createCanvas(1024, 1024)
    const ctx = canvas.getContext("2d")
    // //gridLines: {
    //     color: 'rgb(255, 255, 255)'
    // }
    // options.options.scales.y.gridLines = options.options.scales.y.gridLines || {}
    // options.options.scales.y.gridLines.color = 'rgb(255, 255, 255)'
    // options.options = options.options || {};
    // options.options.scales = options.options.scales || {};
    // options.options.scales.x = options.options.scales.x || {}
    // options.options.scales.x.gridLines = options.options.scales.x.gridLines || {}
    // options.options.scales.x.gridLines.color = 'rgb(255, 255, 255)'
    // options.options.plugins = options.options.plugins || {};
    // options.options.plugins = options.options.plugins || {};
    // options.options.plugins.backgroundColor = 'rgb(255, 255, 255)';

    // options.options.plugins.legend = options.options.plugins.legend || {};
    // //options.options.plugins.legend.backgroundColor = 'rgb(255, 255, 255)';
    // options.options.plugins.legend.labels = options.options.plugins.legend.labels || {};
    //options.options.plugins.legend.labels.color = 'rgb(0, 0, 0)'; // Set label color

    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height)


    new Chart(ctx, options)
    const base64Image = canvas.toDataURL("image/jpeg")

    canvas.toBuffer()
    return base64Image
}

export default createChart;
 

Answer 1

您可以使用这个库

chartjs-node-canvas

https://www.npmjs.com/package/chartjs-node-canvas

结果是这样的

const { ChartJSNodeCanvas } = require("chartjs-node-canvas");
const { promises: fs } = require("fs");

const width = 400; //px
const height = 400; //px
const backgroundColour = "white";
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour });

(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,
        },
      ],
    },
  };

  const image = await chartJSNodeCanvas.renderToBuffer(configuration);
  await fs.writeFile("./example.png", image, "base64");
})();