如何在Chart.js条形图中隐藏缺失或空条形图？

piv4azn7 于 2023-06-22 发布在 Chart.js

关注(0)|答案(1)|浏览(169)

我试图显示来自多个数据集的数据，其中一些数据集没有特定x值的数据。我使用的是chart.js版本4.3.0。
为了实现这一点，我使用了一个（x; y）如本文所述的数据结构：www.example.com https://www.chartjs.org/docs/latest/general/data-structures.html#object
但是我面对的是奇怪和不一致的行为。
我试着用一个最小的例子来重现这个问题：

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
        }
    }
);

以下是制作的图表：

我想要的行为是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 },
    { year: 564, count: 3 },    // new row
];

这张图看起来很破碎：

chart.js

来源：https://stackoverflow.com/questions/76523739/how-can-i-hide-missing-or-null-bars-in-a-chart-js-bar-chart

1条答案

按热度按时间

0aydgbwb1#

如果您在year属性上对数据集（array sort function documentation）进行排序，您可以简单地修复所有问题。
由于 “未对准” 导致数据集的问题。

这里有一个demo：

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

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

let years =  [ ...data.map( x => x.year), ...data2.map( x => x.year)];

years.forEach((year) => {
    if(!data.find( x => x.year == year)){
        data.push({ year })
    }
    if(!data2.find( x => x.year == year)){
        data2.push({ year })
    }
});

data.sort((a,b) => a.year - b.year);
data2.sort((a,b) => a.year - b.year);

const config =  {
        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
        }
    };

new Chart(
    document.getElementById('chart'),
    config
);

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

**更新：**只需要匹配两个数据集的Dataset条目即可。

在上面的例子中，我循环遍历两个数据集的所有年份，并在各自的数组中添加缺失的一次。* 可能有更有效的方法，但我只是想展示问题的原因，以及解决方案。

赞(0）回复(0）举报 2023-06-22

我来回答

如何在Chart.js条形图中隐藏缺失或空条形图？

1条答案

相关问题

热门标签

最新问答