使用 ChartJS 从 0 开始条形图答案

【问题标题】：Start bar-chart at 0 using ChartJS使用 ChartJS 从 0 开始条形图
【发布时间】：2017-07-01 05:19:27
【问题描述】：

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

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

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

}

【问题讨论】：

还没有修复
您永远不会看到值为0 的数据的物理条。想一想——图表中没有条形图告诉查看者该列的值为0——即使 Y 轴从零以下的数字开始。如果查看者在那里看到一个条形，他们会认为它的值大于0。然后当他们将鼠标悬停在上面看到0时，他们会很困惑。
你的权利。但是一个完全空荡荡的酒吧看起来并不好。我还将xAxes 的display 更改为false。当其中有数据时，条形图会显示。如果没有数据，我的页面上只有一个空白区域
还没有修复

标签： javascript charts chart.js

【解决方案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>

【讨论】：

是的，它奏效了。谢谢。你知道我如何为条形定义多种颜色吗？现在ctx.fillStyle = '#F00'; 可以为此定义多种颜色吗？喜欢：ctx.fillStyle = "#26B99A", "#8cb926","#ede92d","#b96f26","#b92626"ctx.fillStyle = '#FF0000';
ctx.fillStyle 被放置在 foreach 循环中。因此，您一次只能为一个条形设置颜色。要获取酒吧背景，请使用：ctx.fillStyle = elm._model.backgroundColor

【解决方案2】：

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

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

【讨论】：

beginAtZero:false, 条形图从 0 开始。但条形图上不显示 0

【解决方案3】：

因为您的 Y 轴值从 0 开始。因此，如果您在 X 轴上的值为 0，那么它将为 null，并且不会显示 0 的条形图。因此，如果您希望 0 出现在图表中，您的起点应该小于 0。

【讨论】：

所以它必须从-1开始？
是的，因为您需要它应该从 -1 或以下开始。
我怎样才能让它从-1开始
我正在使用 chart.js
不确定，但您可以尝试：beginAtZero:false 并添加一些最小值，例如 min: -2 或更小。

【解决方案4】：

我相信你说你使用的是chartsjs。这个问题已经有了答案here。

【讨论】：

【解决方案5】：

试试这个，图表将从零开始。

   options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

【讨论】：