设置chart.js条形图的最大值答案

【问题标题】：Set max value of chart.js bar chart设置chart.js条形图的最大值
【发布时间】：2017-06-08 13:43:59
【问题描述】：

我正在创建一个条形图来显示百分比，因此我只希望图表达到最大值 100。

我在选项中得到以下信息：

    var options = {
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
        maintainAspectRatio: false,
        responsive: true,
        animation: false,
        scaleBeginAtZero: true,
        scales: {
            yAxis: [{
                ticks: {
                    beginAtZero:true,
                    min: 0,
                    max: 100
                }
            }]
        }
    };

当图表加载时，我的数据包含 100% 的值，但条形图的 yAxis 值不是 100，而是上升到 120。

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

这不起作用的原因仅与您使用的 ChartJS 版本有关。由于您使用的是 ChartJS 1.x 版，因此当前的比例选项将不适用于图表。

您应该使用以下比例选项...

scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var ctx = document.getElementById("canvas").getContext("2d");
var data = {
   labels: ['Jan', 'Feb', 'Mar'],
   datasets: [{
      label: "# of votes",
      fillColor: "#07C",
      data: [50, 80, 200]
   }]
};

var myBarChart = new Chart(ctx).Bar(data, {
   scaleOverride: true,
   scaleSteps: 10, // number of ticks
   scaleStepWidth: 10, // tick interval
   scaleBeginAtZero: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="canvas" width="350" height="200"></canvas>

【讨论】：

啊，谢谢，我没有注意到我拥有的更新版本是什么，但这已经奏效了。谢谢

【解决方案2】：

对于chart.js v3.x.x，使用以下（使用v3.3.2测试）：

var options = {
    scales: {
        y: {
            suggestedMin: 0,
            suggestedMax: 100
        },
        x: {
            suggestedMin: 0,
            suggestedMax: 100
        }
    }
}

阅读：https://www.chartjs.org/docs/3.3.2/axes/#axis-range-settings

【讨论】：