我正在使用http://www.chartjs.org/的折线图
如您所见,Y轴的最大值(130)和最小值(60)是自动选择的,我希望最大值= 500,最小值= 0.这可能吗?
1> Ofer Segev..:
对于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文档.
另请参阅`ticks`命名空间的`min`,`max`和`stepsize`属性
`suggestedMax`为最小值
2> 小智..:
你必须覆盖比例,试试这个:
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
});
}
请注意,此答案与图表的1.x版本相关.js 2.x版本中的`scales`对象是完全不同的.请参阅下面的@OferSegev答案和[2.x文档](http://www.chartjs.org/docs/).
3> 小智..:
var cOnfig= {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [10, 80, 56, 60, 6, 45, 15],
fill: false,
backgroundColor: "#eebcde ",
borderColor: "#eebcde",
borderCapStyle: 'butt',
borderDash: [5, 5],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
4> Tom Nijs..:
ChartJS v2.4.0
如2017年7月7日https://github.com/jtblin/angular-chart.js中的示例所示(因为这似乎经常发生变化):
var optiOns= {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
这将产生5个y轴值:
100
80
60
40
20
0
5> Koushik Das..:
在2016年写这个,而Chart js 2.3.0是最新的.以下是如何改变它的方法
var optiOns= {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
6> troelskn..:
以上答案对我不起作用.可能自11年以来选项名称发生了变化,但以下是我的诀窍:
ChartJsProvider.setOptions
scaleBeginAtZero: true
7> 小智..:
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中使用'options'进行配置.
您应该阅读文档:http:
//www.chartjs.org/docs/#scales-linear-scale
文档非常令人沮丧......我必须搜索人们的例子来猜测可用的选项.
8> rtome..:
只需在选项中设置scaleStartValue的值即可.
var optiOns= {
// ....
scaleStartValue: 0,
}
请在此处查看相关文档.
9> 小智..:
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
max:100
}
}]
10> JPeG..:
这适用于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
11> Ishara Amara..:
我写了一个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,
}
}]
}
}
});