如何防止空条在 Chart.js 条形图中占据宽度答案

【问题标题】：How to prevent empty bars from taking up width in Chart.js bar chart如何防止空条在 Chart.js 条形图中占据宽度
【发布时间】：2021-11-11 05:23:07
【问题描述】：

我正在 Chart.js 中构建条形图。我有多个数据系列，但通常并非所有数据系列都有价值。发生这种情况时，即使条形图不存在，Chart.js 似乎也想为它们分配空间：

请注意上面的绿色和蓝色条如何始终相对于标签左对齐，以及粉红色和黄色如何始终在右侧。如何使条形相对于它们的标签居中显示？

【问题讨论】：

空栏是链接到null 值还是0 值？
如果它们是null 值，您可以尝试使用skipNull 选项。否则，您可以在将数据传递给 Chart.js 之前将 0 值替换为 null
顺便说一句，在您的问题中添加数据是个好主意。
我见过的最懒惰的副本，与之前发布的问题完全相同：stackoverflow.com/questions/69919132/…
@Drarig29 我忽略了它，因为有很多转换，但它们是空的。 skipNull 似乎实际上是拼图中缺失的部分，但现在条形的宽度不一致。我会玩弄它，看看我得到了什么。

标签： javascript chart.js

【解决方案1】：

@Drarig29 的答案是正确的——null 值加上 skipNull 删除了多余的条。但是，如果您使用barPercentage，则您的条的宽度会波动（在我的情况下，从宽度的 1/5 到宽度的 100% 不等，取决于有多少条），所以您必须在数据集上设置maxBarThickness 以防止它们增长。

【讨论】：

不要忘记将您的解决方案标记为已接受。并始终阅读您的图书馆的文档。