Chart.js beginAtZero 不起作用

【问题标题】：Chart.js beginAtZero doesn't workChart.js beginAtZero 不起作用
【发布时间】：2017-11-23 15:24:19
【问题描述】：

我在使用 Chart.js 时遇到问题，因为即使我设置了 beginAtZero 参数，条形图也不是从零开始。

我为代码的正确位置尝试了多种方法，但似乎不起作用。

有人知道如何解决我的问题吗？

代码如下：

var chartdata = {
  labels: answer,
  datasets: [{
      label: 'Count',
      backgroundColor: 'rgba(200, 200, 200, 0.75)',
      borderColor: 'rgba(200, 200, 200, 0.75)',
      hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
      hoverBorderColor: 'rgba(200, 200, 200, 1)',
      data: count
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

var ctx = $("#mycanvas");

var barGraph = new Chart(ctx, {
  type: 'bar',
  data: chartdata
  options: options
});

【问题讨论】：

创建一个[jsfiddle](jsfiddle.net)会更容易帮你

标签： javascript chart.js yaxis

【解决方案1】：

看起来您使用的是 Chart.js v1 而不是 v2。

首先，将您的 Chart.js 代码更新为 v2，最好是 latest version。

然后，更改以下代码：

var barGraph = new Chart(ctx, {
    type: 'bar',
    data: chartdata
    options: options
});

到：

var barGraph = Chart.Bar(ctx, {
  data: chartdata,
  options: options
});

beginAtZero: true 然后应该按预期工作。

工作 JSFiddle：https://jsfiddle.net/ko54hp6n/

对于beginAtZero: true 的替代方案，您还可以使用min: 0 刻度配置选项将条形轴从零开始：

var options = {
  scales: {
    yAxes: [{
      ticks: {
        min: 0
      }
    }]
  }
}

工作 JSFiddle：https://jsfiddle.net/ko54hp6n/1/

【讨论】：