如何在 Chartjs 条形图中删除那些值为零的条形图？答案

【问题标题】：How to remove bars for those bars with zero value in Chartjs bar chart?如何在 Chartjs 条形图中删除那些值为零的条形图？
【发布时间】：2023-03-12 16:06:01
【问题描述】：

即使条形图在使用 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>

【问题讨论】：

你能在 jsfiddle 中试试吗？
在您的选项中添加：barStrokeWidth: 0

标签： html html5-canvas bar-chart chart.js

【解决方案1】：

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

只需添加这个：

barStrokeWidth:0,

或：

barShowStroke : false,

在您的选择中。

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

//Boolean - 如果每个条上都有一个笔划

barShowStroke : 真，

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

barStrokeWidth : 2,

【讨论】：

太棒了。 barShowStroke 在这里成功了！将barStrokeWidth 设置为零仍会在 x 轴线上显示颜色。谢谢！我宁愿在酒吧周围中风。有没有办法在除了底部之外的侧面进行笔划？
你可以试试 Jsfiddle 吗？
@user2267379- 玩了一会儿之后，我发现没有中风实际上使图表更漂亮、更干净！将 barShowStroke 设置为 false 对我有用。谢谢！

【解决方案2】：

如果barShowStroke : true

不工作尝试

barRadius: 0

【讨论】：

【解决方案3】：

2021 年 12 月更新：

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

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

【讨论】：