我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的，我想要最大值= 500和最小值=0。这可能吗?
当前回答
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
type: 'line',
data: yourData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 500
}
}]
}
}
});
我在v2中配置了“选项”。
你应该阅读文档: http://www.chartjs.org/docs/#scales-linear-scale
其他回答
对于chart.js V2 (beta)，使用:
var options = {
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true // minimum value will be 0.
}
}]
}
};
有关线轴配置的详细信息，请参阅chart.js文档。
对于Chart.js v3.2.0，这样做:
let options = {
scales: {
y: {
suggestedMin: 0,
suggestedMax: 69
},
x: {
suggestedMin: 0,
suggestedMax: 420
}
}
}
文档:https://www.chartjs.org/docs/latest/axes/ axis-range-settings
对于"chart.js": "^3.6.1"，
options: {
scales: {
y: {
min: 0,
max: 100,
}
}
}
这是针对Charts.js 2.0的:
其中一些不工作的原因是因为你应该在创建图表时像这样声明你的选项:
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
相关文档如下: http://www.chartjs.org/docs/#scales
由于上面的建议对我的charts.js 2.1.4没有任何帮助，我通过将值0添加到我的数据集数组(但没有额外的标签)来解决它:
statsData.push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
