Html 在 Chart.js 中将 Y 轴值从实数更改为整数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15751571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the Y-axis values from real numbers to integers in Chart.js
提问by Rachid O
I have a chart that I want to include in my website using Chart.js. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?
我有一个图表，我想使用Chart.js将其包含在我的网站中。在 Y 轴上，它给了我实数而不是整数。如何将数字更改为整数？
Here's a picture of what I have now:
这是我现在拥有的图片：
And this is the code:
这是代码：
var lineChartData = {
labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : ["0", "2","1", "0", "1","0","1"]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);
采纳答案by Mewel
Try this, where max is the highest value of your data.
试试这个，其中 max 是数据的最高值。
var steps = 3;
new Chart(ctx).Bar(plotData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0
});
回答by Saeed
I handled it this way in new version:
我在新版本中是这样处理的：
new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}]
}
}
});
回答by DBS
I wasn't able to get the existing answers to work for me when using the new version 2 of Chart.js, so here's what I found to solve this problem in V2:
在使用Chart.js的新版本 2时，我无法获得现有答案对我有用，所以这是我在 V2 中发现的解决此问题的方法：
new Chart(ctx, {type: 'bar', data: barChartData,
options:{
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
});
回答by Raúl Ota?o
回答by Ben Bloodworth
I know this is an old question now, but in the current version (v2.9.3) you can just set the precision of the y-axis ticks to zero to get integers:
我现在知道这是一个老问题，但在当前版本 (v2.9.3) 中，您只需将 y 轴刻度的精度设置为零即可获得整数：
options: {
scales: {
yAxes: [{
ticks: {
precision: 0
}
}]
}
}
回答by MRodrigues
If you like to start in a different number than zero, you have to take that into account:
如果您想以与零不同的数字开始，则必须考虑到这一点：
var step = 5;
var max = 90
var start = 40;
new Chart(income).Bar(barData, {
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
scaleStartValue: start
});
