You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Chart.js 4.3.0柱状图隐藏空值柱状图异常问题求助

Chart.js 4.3.0 多数据集空值显示异常及崩溃问题

使用Chart.js 4.3.0展示多数据集数据,部分数据集对特定x值无数据。采用官方文档的(x;y)数据结构并设置skipNull:true,但出现不一致的异常表现:2013、2110列符合仅显示有数据柱状图的预期,但564、2010列却显示异常。其中2010与2110的配置逻辑一致,564与2013的配置逻辑也一致,但表现不同。此外,添加一条数据后图表直接崩溃。请问这是操作错误还是Bug?

复现代码

const data = [
    { year: 2010, count: 10 },
    { year: 2013, count: 15 },
    { year: 2110, count: null },
    { year: 5464, count: 4 },
];

const data2 = [
    { year: 564, count: 30 },
    { year: 2010, count: null },
    { year: 2110, count: 3 },
    { year: 5464, count: 3 },
];

new Chart(
    document.getElementById('acquisitions'),
    {
        type: 'bar',
        data: {
            datasets: [
                {
                    label: 'Set 1',
                    data: data.map(row => ({ x: row.year, y: row.count })),
                    backgroundColor: '#00ff00'
                },
                {
                    label: 'Set 2',
                    data: data2.map(row => ({ x: row.year, y: row.count })),
                    backgroundColor: '#ff0000'
                },
            ],
            xLabels: Array.from(new Set([...data, ...data2].map(row => row.year))).sort((a, b) => a-b)
        },
        options: {
            skipNull: true,
            responsive: true
        }
    }
);

编辑补充:新增数据后图表崩溃

const data = [
    { year: 2010, count: 10 },
    { year: 2013, count: 15 },
    { year: 2110, count: null },
    { year: 5464, count: 4 },
    { year: 564, count: 3 },    // 新增行
];

内容的提问来源于stack exchange,提问作者Marc F

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 04:48:34