我正在创建一个显示百分比的条形图,因此我只希望图表的最大值为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.
答案 0 :(得分: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>
答案 1 :(得分:0)
对于 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