我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的,我想要最大值= 500和最小值=0。这可能吗?
我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的,我想要最大值= 500和最小值=0。这可能吗?
当前回答
我写了一个js在y轴上显示从0到100的值,间隔为20。
这是我的script。js
//x-axis var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"]; //The percentage of vehicles of each type var percentage = [41, 76, 29, 50]; var ctx = document.getElementById("barChart"); var lineChart = new Chart(ctx, { type: 'bar', data: { labels: vehicles, datasets: [{ data: percentage, label: "Percentage of vehicles", backgroundColor: "#3e95cd", fill: false }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, min: 0, max: 100, stepSize: 20, } }] } } });
这是显示在网页上的图表。
其他回答
编辑:
他们做了一些改变。目前,这是可行的
scales: {
x: {
...,
max: value,
min: value
},
y: {
...same as x
}
}
这里是最新变化的链接 最小最大图表js
旧的回答:
截至2022年2月,这是有效的。以下是一个人可以改变它的方法
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
只需在选项中设置scaleStartValue的值。
var options = {
// ....
scaleStartValue: 0,
}
请在这里查看相关文档。
关于这个问题,有很多相互矛盾的答案,其中大多数对我没有任何影响。
我终于能够用chart.options.scales.xAxes[0].ticks设置(或检索当前)x轴最小和最大显示值。最小值(即使最小值和最大值只是分配给图表的数据的子集)。
在我的例子中使用时间刻度,我使用:
chart.options.scales.xAxes[0].ticks.min = 1590969600000; //Jun 1, 2020
chart.options.scales.xAxes[0].ticks.max = 1593561600000; //Jul 1, 2020
chart.update();
(我发现不需要设置步长值或beginAtZero等)
对于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 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文档。