如何设置Y轴的最大值和最小值
我正在使用http://www.chartjs.org/的折线图
如您所见,Y轴的最大值(130)和最小值(60)是自动选择的,我希望最大值= 500,最小值= 0.这可能吗？
Ofe*_*gev 229
对于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`属性 (26认同)
- `suggestedMax`为最小值 (15认同)
小智 65
你必须覆盖比例,试试这个:
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/). (39认同)
Ram*_*esh 51
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);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
</body>Tom*_*ijs 36
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
Gar*_*lin 25
为了"chart.js": "^3.6.1",
options: {
scales: {
y: {
min: 0,
max: 100,
}
}
}
- 2022 年 4 月 Chart.js v3.6.0：遗憾的是这个答案并不接近页面顶部。在尝试这个完全符合我预期的答案之前，我没有成功地浏览了所有以前的答案。 (7认同)
- 与@Rodent相同。许多人提到“刻度”内的最小/最大，但这不起作用！上面的答案是正确的，我也尝试了很多次。无论数据值是什么，它都会“强制”Y 比例固定为最小/最大。 (3认同)
Kou*_*Das 21
在2016年写这个,而Chart js 2.3.0是最新的.以下是如何改变它的方法
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
- 我会修改答案以指定版本而不是日期，因为问题的答案取决于版本。Chart.js 3.0 引入了许多重大更改，包括删除 xAxes 和 yAxes 选项，请参阅 https://www.chartjs.org/docs/3.7.0/getting-started/v3-migration.html (3认同)
tro*_*skn 15
以上答案对我不起作用.可能自11年以来选项名称发生了变化,但以下是我的诀窍:
ChartJsProvider.setOptions
scaleBeginAtZero: true
小智 13
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
- 文档非常令人沮丧......我必须搜索人们的例子来猜测可用的选项. (2认同)
小智 10
> 最佳解决方案
"options":{
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, //min
suggestedMax: 100 //max
}
}]
}
}
只需在选项中设置scaleStartValue的值即可.
var options = {
// ....
scaleStartValue: 0,
}
请在此处查看相关文档.
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
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
对于 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
- 很高兴看到有人实际上引用了 ChartJS 3，而不是旧的 v1 或 v2 版本。 (5认同)
就我而言，我在 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]
}
}
}
}],
它运作良好。
我写了一个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,
}
}]
}
}
});这是显示在网上的图表。
| 归档时间： |
|
| 查看次数： |
236390 次 |
| 最近记录： |