我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的,我想要最大值= 500和最小值=0。这可能吗?
我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的,我想要最大值= 500和最小值=0。这可能吗?
当前回答
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为复数
其他回答
这是针对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
>最佳解决方案
"options":{
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, //min
suggestedMax: 100 //max
}
}]
}
}
从最新版本v3.9.1开始,你可以像这样设置你的比例:
options:{
scales:{
y:{
beginAtZero: true,
max: 500 // values over 500 will be hidden, OR
suggestedMax: 500, // maximum will be 500, unless there is a higher value
}
}
}
在1.1.1中,我使用以下方法来固定0.0和1.0之间的比例:
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
我写了一个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, } }] } } });
这是显示在网页上的图表。