[英]Set max value of chart.js bar chart
我正在創建一個條形圖來顯示百分比,因此我只希望圖表達到最大值 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。
這不起作用的原因僅與您使用的 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>
對於 chart.js v3.xx ,使用以下(使用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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.