我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的，我想要最大值= 500和最小值=0。这可能吗?
当前回答
对于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 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文档。
由于上面的建议对我的charts.js 2.1.4没有任何帮助，我通过将值0添加到我的数据集数组(但没有额外的标签)来解决它:
statsData.push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
v3。X (v3.5.0)
线性笛卡尔轴
let options = {
scales: {
y: {
beginAtZero: true,
suggestedMax: 69
},
x: {
beginAtZero: true,
suggestedMax: 420
},
ticks: {
stepSize: 1
}
}
}
引用https://www.chartjs.org/docs/3.5.0/axes/cartesian/linear.html
线性径向轴
let options = {
scales: {
r: {
beginAtZero: true,
suggestedMax: 5,
ticks: {
stepSize: 1
}
}
}
}
引用https://www.chartjs.org/docs/3.5.0/axes/radial/linear.html
v2。X (v2.9.4)
线性笛卡尔轴
let options = {
scale: {
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 5,
}
}
}
引用https://www.chartjs.org/docs/2.9.4/axes/cartesian/linear.html
线性径向轴
let options = {
scale: {
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 5,
}
}
}
引用https://www.chartjs.org/docs/2.9.4/axes/radial/linear.html
注:v2为单数，v3为复数
只需在选项中设置scaleStartValue的值。
var options = {
// ....
scaleStartValue: 0,
}
请在这里查看相关文档。
在我的例子中，我在yaxis ticks中使用了一个回调， 我的值是百分比，当它达到100%时，它不显示点，我使用这个:
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
min: 0,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
而且效果很好。
