如何在Chartjs条形图中删除值为零的条形？

Question

即使在使用chartjs创建的条形图中，柱子的值为零，它们仍然会显示出一个可见的柱子。这会误导我的目的，我希望将其删除并不显示任何内容（这意味着我仍然想显示零值标签，但不显示柱子）。我尝试改变y轴的最小值，但没有任何区别。下面的图片显示了56、60和78列的问题。有没有办法去除这个？谢谢！

以下是我的脚本：

<div>
  <canvas id="canvas_bar" height="250", width = "300" ></canvas>
</div>

<script>
    var barChartData = {
        labels : [56, 60, 78, 90],
        datasets : [
        {   fillColor : "rgba(139,0,0,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            data : [20.0, 0, 0, 50]  },

        {   fillColor : "rgba(1,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            data : [0, 0.0, 40.0, 10]  }
        ]
    }
    window.onload = function(){
        var ctx = document.getElementById("canvas_bar").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            animation: false,
            responsive : false,
            barValueSpacing : 15,
            scaleShowVerticalLines: false,
        });
    }
</script>

- Manavalan Gajapathy

---

你能在 jsfiddle 上试试吗？ - user2267379

将以下内容添加到您的选项中：barStrokeWidth: 0 - user2267379

Answer 1

2021年12月更新:

• barStrokeWidth已被弃用。
• 我使用了inflateAmount: 0（默认值为auto），这解决了我的问题。

文档：https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties

- adi carmel

---

inflateAmount: 0 对我很有用！需要在堆叠条形图中隐藏值为0的柱形。| chart.js@3.7.1 - bigZ

Answer 2

默认情况下，barStrokeWidth 的值为2。

只需添加以下内容：

barStrokeWidth:0,

或者：

barShowStroke : false,

在您的选项中。

http://www.chartjs.org/docs/#bar-chart-chart-options

//布尔值 - 每个条形图是否有描边

barShowStroke : true,

//数字 - 条形图描边的像素宽度

barStrokeWidth : 2,

- user2267379

---

太棒了。barShowStroke在这里起到了作用！将barStrokeWidth设置为零仍然会显示x轴线的颜色。谢谢！我更喜欢在条形图周围有描边。有没有办法在除底部以外的侧面上有描边？ - Manavalan Gajapathy

你能在 Jsfiddle 上尝试一下吗？ - user2267379

@user2267379- 经过一番玩弄之后，我发现去掉线条的效果会让图表更加美观和清晰！将barShowStroke设置为false对我来说很有效。谢谢！ - Manavalan Gajapathy

更新：在当前版本> 4.3.x中，数据集属性barStrokeWidth已被弃用。 - Aakash

Answer 3

我发现您可以向数据集对象添加skipNull属性。当值为null或undefined时，柱状图将不占用任何空间。

https://www.chartjs.org/docs/3.2.0/charts/bar.html

- Kitty Captain

Answer 4

如果 barShowStroke : true

不起作用，请尝试

barRadius: 0

- CelastrinaLadon