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
相关产品推荐
相关产品推荐

