Chart.js(chartjs-node-canvas)创建日期型浮动条形图渲染异常

浮动条形无法正常渲染由3个直接问题导致：

1. Chart.js 时间轴（time scale）依赖独立的日期解析适配器，未注册适配器时所有传入的时间字符串无法被解析为合法时间戳，数据点x坐标计算完全失效。
2. 时间轴下的条形图，单条数据的x字段如果仅传单个时间点，条形会按当前轴跨度自动计算极窄的默认宽度，在你设置的2小时x轴范围下，条形宽度不足1像素，肉眼无法识别。
3. 数据集未配置backgroundColor属性，条形默认填充色为透明，就算位置计算正确也看不到图形。

• 安装时间适配器依赖：Chart.js 3及以上版本的时间轴不内置日期解析能力，Node端直接安装chartjs-adapter-date-fns与date-fns即可，执行安装命令：

npm install chartjs-adapter-date-fns date-fns

• 在代码顶部引入依赖并完成注册：

const { Chart } = require('chart.js');
const { CanvasRenderService } = require('chartjs-node-canvas');
require('chartjs-adapter-date-fns');
const fs = require('fs');

• 调整数据结构：时间轴下的浮动条形需要给x字段传[条形起始时间, 条形结束时间]的数组，明确条形在时间轴上的宽度范围，y字段保留原有[y轴起始值, y轴结束值]的浮动范围配置即可。
• 给数据集补充backgroundColor属性，设置非透明填充色。
• Node端渲染时在options里加responsive: false配置，避免自适应逻辑导致尺寸计算异常。

// 初始化canvas渲染服务，按需求设置导出图片尺寸
const canvasRenderService = new CanvasRenderService(800, 600);

const config = {
    type: "bar",
    data: {
        datasets: [{
            label: "Badges",
            data: [
                {
                    // 配置条形在x轴占10分钟宽度，位置落在时间轴起始段
                    x: ["2022-06-22T12:36:17.226Z", "2022-06-22T12:46:17.226Z"],
                    y: [10, 15]
                }
            ],
            backgroundColor: "rgba(75, 192, 192, 0.5)",
            borderColor: "rgb(75, 192, 192)",
            borderSkipped: false
        }]
    },
    options: {
        responsive: false,
        plugins: {
            legend: {
                display: false
            },
            title: {
                display: true,
                text: "Test",
                color: "#FFFFFF"
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'minute'
                },
                title: {
                    display: true,
                    text: 'Time',
                    color: "#FFFFFF"
                },
                min: "2022-06-22T12:21:17.226Z",
                max: "2022-06-22T14:21:17.226Z",
                grid: {
                    borderColor: "#FFFFFF",
                    color: "rgba(255,255,255,0.1)"
                },
                ticks: {
                    color: "#FFFFFF"
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Number of Badges',
                    color: "#FFFFFF"
                },
                min: 0,
                max: 50,
                grid: {
                    borderColor: "#FFFFFF",
                    color: "rgba(255,255,255,0.1)"
                },
                ticks: {
                    color: "#FFFFFF"
                }
            }
        }
    },
    plugins: [
        {
            id: 'custom_canvas_background_color',
            beforeDraw: (chart) => {
                const ctx = chart.ctx;
                ctx.save();
                ctx.fillStyle = '#303030';
                ctx.fillRect(0, 0, chart.width, chart.height);
                ctx.restore();
              }
        }
    ]
};

(async () => {
    const imageBuffer = await canvasRenderService.renderToBuffer(config)
    fs.writeFileSync("./chart2.png", imageBuffer)
})()

后续做按月聚合的瀑布图时，只需要把单条数据的x数组替换为对应月份的起止时间即可，时间轴会自动为无数据的空窗期留白，不需要手动补全固定labels。

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