使用ChartJS从0开始的条形图

Question

我有一个使用ChartJS来显示数据的条形图。根据条形图，我有数据：15, 2, 0, 11。

我可以在条形图中看到所有这些数据，但0除外。是否有可能将条形图从0开始，所以我也可以在条形图中看到第四列的数据？

options: {
  legend: { display: false },
  scales: {
      yAxes: [{
          display: false,
      }],
      xAxes: [{
          display: true,
      }],
  },
  title: {
    display: false,
  }

}

Answer 1

经过数小时的工作，终于我找到了解决方法。没有chartjs配置可以执行此操作，您必须自己绘制。让我们在onComplete函数中执行此操作>

var ctx = document.getElementById("myChart").getContext('2d');
var datasets = [15, 2, 0, 11];
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["1", "2", "3", "4"],
    datasets: [{
      label: 'value',
      backgroundColor: '#F00',
      data: datasets
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    animation: {
      onComplete: function() {
        var dataSet = myChart.getDatasetMeta(0);
        dataSet.data.forEach(elm => { 
          if (datasets[elm._index] == 0) {
            ctx.fillStyle = '#F00';
            ctx.fillRect(elm._model.x - elm._view.width / 2, elm._model.y - 1, elm._view.width, 2);
          }
        })
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas class="canvasChart" id="myChart"></canvas>

Answer 2

因为您的Y轴值从0开始到某个值。因此，如果您在X轴上的值为0，则它​​将为null，并且不会显示0的柱。因此，如果您希望0出现在图表中，则起点应小于0。

Answer 3

您可以尝试beginAtZero:true配置选项。

Answer 4

我相信您说过您正在使用Chartsjs。这个问题已经有了答案here。

Answer 5

尝试一下，图表将从零开始。