如何在Node.js中设置Chart.js图表的背景色

你当前的代码已经尝试通过ctx.fillRect填充白色背景，但可能因为Chart.js的绘制逻辑或配置缺失，导致背景仍为透明。可以通过以下两步彻底解决：

1. 确保Canvas背景填充在Chart初始化前执行 #

你已写出填充白色背景的代码，只需保证这部分代码在new Chart(ctx, options)之前执行（你的代码顺序没问题），白色背景会作为底层被Chart覆盖在上方。

2. 配置Chart.js的图表背景色 #

在Chart的配置选项中，给图表区域设置白色背景，避免图表内部空白区域仍为透明。同时可以补充网格、文字颜色配置，适配白色背景提升可读性：

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")

    // 填充整个Canvas为白色背景
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 完善Chart配置，设置图表区域背景色
    options.options = options.options || {};
    options.options.backgroundColor = "#ffffff";

    // 适配白色背景的网格与文字颜色
    options.options.scales = options.options.scales || {};
    // Y轴配置
    options.options.scales.y = options.options.scales.y || {};
    options.options.scales.y.grid = options.options.scales.y.grid || {};
    options.options.scales.y.grid.color = "#cccccc";
    options.options.scales.y.ticks = options.options.scales.y.ticks || {};
    options.options.scales.y.ticks.color = "#333333";
    // X轴配置
    options.options.scales.x = options.options.scales.x || {};
    options.options.scales.x.grid = options.options.scales.x.grid || {};
    options.options.scales.x.grid.color = "#cccccc";
    options.options.scales.x.ticks = options.options.scales.x.ticks || {};
    options.options.scales.x.ticks.color = "#333333";

    // 图例文字颜色适配
    options.options.plugins = options.options.plugins || {};
    options.options.plugins.legend = options.options.plugins.legend || {};
    options.options.plugins.legend.labels = options.options.plugins.legend.labels || {};
    options.options.plugins.legend.labels.color = "#333333";

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

    return base64Image
}

export default createChart;

关键说明 #

• ctx.fillRect负责填充整个Canvas的背景，确保生成的图片整体无透明区域；
• options.options.backgroundColor设置Chart.js绘制的图表区域背景，避免图表内部空白部分仍为透明；
• 补充的网格、文字颜色配置是为了让图表在白色背景上更清晰，可根据需求调整颜色参数。

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