在 ChartJs v2 中显示零值的条形图 [英] Show bar with zero value in ChartJs v2

问题描述

我想知道有没有办法在 ChartJs(条形图)条中显示零值?

I'm wondering is there any way to show in ChartJs (in bar chart) bars with zero value?

我的意思是这样的:https://jsfiddle.net/vrg5cnk5/16/，所以第二个栏将是零级的蓝色边框.

I mean something like this: https://jsfiddle.net/vrg5cnk5/16/, so the second bar would be just blue border on level zero.

我已经使用了这个代码:

I used already this code:

ticks: {
    beginAtZero: true,
    min: 0,
    suggestedMin: 0
}

但我并不惊讶它不起作用.

but I'm not surprised it didn't work.

提前致谢

推荐答案

无法配置 chart.js 来执行此操作，但您可以使用 hack 代替.只需将 0 条的值设置为非常小的数字，例如 0.1.

There is no way to configure chart.js to do this, but you could use a hack instead. Just set your value for the 0 bar to a really small number like 0.1.

data: [2, 0.1, 3, 1]

这是一个 示例，来自您的.

Here is an example forked from yours.

如果您正在使用工具提示，那么您还必须添加一些逻辑，以便该栏的工具提示仍显示值 0.您可以使用 label 回调来做到这一点.

If you are using tooltips, then you would have to also add some logic so that the tooltip for that bar still displays a value of 0. You can do this using the label callback.

label: function(tooltipItem, data) {
  var value = data.datasets[0].data[tooltipItem.index];
  var label = data.labels[tooltipItem.index];

  if (value === 0.1) {
    value = 0;
  }

  return label + ': ' + value + ' %';
}

这里有一个示例将它们放在一起.

Here is an example putting it all together.

这篇关于在 ChartJs v2 中显示零值的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！