在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
}

但我并不感到惊讶。

预先感谢

推荐答案

无法配置chart.js来执行此操作，但是您可以改用 hack 。只需将0 bar的值设置为一个非常小的数字，例如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。您可以使用标签回调来实现。

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 + ' %';
}

这是示例将它们放在一起。

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