2019更新

Question

我想知道有没有办法在ChartJs（条形图）栏中显示零值？

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

我已使用此代码：

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

但我并不感到惊讶它没有用。

提前致谢

Answer 1

只需在数据集中指定 minBarLength，条形应具有的最小长度（以像素为单位）。见documentation。

工作示例：

var $chartCanvas = $('myCanvas');
var barChart = new Chart(myCanvas, {
    type: 'bar',
    data: {
        labels: ['Accepted Answer', 'Top rated answer', 'This Answer'],
        datasets:[{
            data: [0, 3, 10],
            minBarLength: 7,    // This is the important line!
        }]
    },
    options: {
        title: {
            display: true,
            text: 'helpfulness of answers to this questions'
        },
        legend: {
            display: false
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas"></canvas>

Answer 2

在深入了解插件系统后，如果你使用Chart.js＆gt; = 2.5，你可以编写一个插件来实现它。以下是数据为零时绘制线条的示例。

这是我的代码：

const zeroCompensation = {
  renderZeroCompensation: function (chartInstance, d) {
      // get postion info from _view
      const view = d._view
      const context = chartInstance.chart.ctx

      // the view.x is the centeral point of the bar, so we need minus half width of the bar.
      const startX = view.x - view.width / 2
      // common canvas API, Check it out on MDN
      context.beginPath();
      // set line color, you can do more custom settings here.
      context.strokeStyle = '#aaaaaa';
      context.moveTo(startX, view.y);
      // draw the line!
      context.lineTo(startX + view.width, view.y);
      // bam！ you will see the lines.
      context.stroke();
  },

  afterDatasetsDraw: function (chart, easing) {
      // get data meta, we need the location info in _view property.
      const meta = chart.getDatasetMeta(0)
      // also you need get datasets to find which item is 0.
      const dataSet = chart.config.data.datasets[0].data
      meta.data.forEach((d, index) => {
          // for the item which value is 0, reander a line.
          if(dataSet[index] === 0) {
            this.renderZeroCompensation(chart, d)
          }
      })
  }
};

以下是如何向Chart.js添加插件

var chart1 = new Chart(ctx, {
    plugins: [plugin]
});

官方文档不清楚他们的插件API，你可以在console.log中找到你想要的东西。

Answer 3

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

data: [2, 0.1, 3, 1]

这是你的example分叉。

如果您正在使用工具提示，那么您还必须添加一些逻辑，以便该栏的工具提示仍显示值0.您可以使用label回调执行此操作。

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

这是example将所有内容放在一起。

Answer 4

这是在 V3 图表 js 中执行此操作的最简单方法

Chart.defaults.datasets.bar.minBarLength = 5;

Answer 5

如果您为此感到困扰，这就是我的想法。这与李金耀的想法类似，但是除此之外，您还将获得单击和悬停事件（工具提示），它们适用于整个栏。我的值接近0但为负，该条形图将显示在x轴的负侧-如果您不想要这样做，则可以轻松摆脱它。

const zeroCompensation = {
id: 'zeroCompensation',

beforeDatasetsDraw: function(chart) {
    const meta = chart.getDatasetMeta(0)
    forEach(meta.data, d => {
        const barHeight = d._view.base - d._view.y;
        if(Math.abs(barHeight) < minBarHeight /* I used value 5 */) {
            d._view.y = d._view.base - minBarHeight * (Math.sign(barHeight) || 1);
        }
    });
}};

并将其添加到插件中

plugins: [zeroCompensation]

请记住，这将适用于接近0的值，不仅适用于0。如果只希望使用零，则可以将if条件的内容更改为：

chart.config.data.datasets[0].data[index] === 0

这是李金耀在回答中所使用的。希望能有所帮助。
编辑：我想强调一点，即解决方案不受价值传播的影响。如果数据集中有一些较高的值，则标记为解决方案的答案将无法正常工作-在这种情况下，0.1将表示为0。

Answer 6

我偶然发现了这个问题，因为我有一个类似的问题：Chart.js图表的类型为“ horizontalBar ”，对于某些数据集（整个数据集中不存在零值）水平条不是从0开始，而是从数据集中的最小值开始。

我试图找出解决方案，并在创建图表时在 options 对象中输入了以下内容：

ticks: {
                  beginAtZero:true,
                  mirror:false,
                  suggestedMin: 0,
                  suggestedMax: 100
}

尽管所有帖子都说它可以那样工作，但是这并没有按预期工作。经过进一步调查并阅读Chart.js文档后，我找到了解决方案。我在documentation中发现了以下进一步步骤无效的原因：

但是，在条形图的x轴上指定的任何选项都将应用于水平条形图的y轴。

所以我只是更改了我的选项对象，以保持 xAxes 的正确配置，并且可以正常工作。

对于那些对此感兴趣的人，是我用来创建水平条形图的全部代码，这些条形图的y轴始终从零开始：

this.chart = new Chart(
    ctx,
    {
        type: 'horizontalBar',
        data: this.data.chartdata,
        options: {
          scales: {
              xAxes: [{ 
                stacked: false,
                ticks: {
                  beginAtZero:true,
                  mirror:false,
                  suggestedMin: 0,
                  suggestedMax: 100
                } 
              }],
              yAxes: [{ 
                stacked: true
              }]
          },
          scaleBeginAtZero : true,
          // important here to use () =>
          // to keep the scope of this
          onClick: (e) => {
            var actChart : Chart = this.charts[trialId];
            var element =
              actChart.getElementAtEvent(e);

            }
        }
    }
);

Answer 7

2019更新

这可以轻松完成，如下所示。

var myChart = new Chart(ctx, {
    ...
    options: {
        ...
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
);

您可以在Chart.js文档https://www.chartjs.org/docs/latest/

中找到它

在ChartJs v2中显示零值的栏

7 个答案:

2019更新