如何扩展数据的“ Y”比例以使其看起来更漂亮?条形数据被图形的顶部边框截断。如果最大数量为100,则显示例如110,这将是顶部边框的一小部分填充。
我的代码:https://jsfiddle.net/selvestrstal/ent8zchq/
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "First dataset",
data: [65, 100, 100, 81, 56, 55, 90]
}, {
label: "Third dataset",
data: [38, 55, 50, 65, 35, 67, 54]
}]
};
var chart = new Chart('graph_data', {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
filler: {
propagate: true
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
title: function(i, val) {
return [0].xLabel;
},
},
},
legend: {
display: true,
},
layout: {
padding: {
left: 5,
right: 5,
top: 5,
bottom: 10
}
},
scales: {
padding: 10,
xAxes: [{
display: true,
ticks: {
autoSkip: true,
offset: true,
maxRotation: 0,
padding: 5,
},
scaleLabel: {
display: true,
}
}],
yAxes: [{
display: true,
ticks: {
autoSkip: true,
offset: true,
maxRotation: 0,
beginAtZero: false,
padding: 5,
},
}]
}
}
});
答案 0 :(得分:1)
覆盖比例:
尝试这样的事情:
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 50,
scaleStartValue : 0
});
}
max
选项也是可行的,因为它可以帮助问题的作者。