如何在 javascript chart.js 中只显示整数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18695382/
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
How to display only integers in javascript chart.js
提问by vaibhav jain
I want to display only integers not floats in the chart created by java script library chartjs.org
我想在由 java 脚本库chartjs.org创建的图表中只显示整数而不是浮点数
Here is the link to the example graph
这是示例图的链接
I am new to this Can someone help me to configure this
我是新手，有人可以帮我配置这个吗
回答by Alejandro Lasebnik
This is the way to do it using chart.js 2.5 : Just add this callback function to the yAxes ticks property
这是使用 chart.js 2.5 的方法：只需将此回调函数添加到 yAxes ticks 属性
function (value) { if (Number.isInteger(value)) { return value; } }
函数（值）{ 如果（Number.isInteger（值））{ 返回值；} }
or just use stepSize: 1 in the same place.
或者只是在同一个地方使用 stepSize: 1 。
jsFiddle: https://jsfiddle.net/alelase/6f8wrz03/2/
jsFiddle：https://jsfiddle.net/alelase/6f8wrz03/2/
var ctx = document.getElementById("chart1");
var data = {
labels: ['John', 'Alex', 'Walter', 'James', 'Andrew', 'July'],
datasets: [
{
label: "Messages: ",
data: [1, 2 , 5, 4, 3, 6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
]
}]
};
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
beginAtZero: true,
options: {
responsive: true,
legend: {
display: false
},
title: {
display: false,
text: 'Chart.js bar Chart'
},
animation: {
animateScale: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (Number.isInteger(value)) { return value; } },
stepSize: 1
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div>
<canvas id="chart1"></canvas>
</div>回答by Adithya Sreyaj
As of version 2.8, you can simply add the precisionproperty of the ticks object as :
从 2.8 版开始，您可以简单地将precision滴答对象的属性添加为：
yAxes: [
{
ticks: {
precision: 0,
},
},
],
回答by Ahtisham
var max= 100 //heighest value of your data
var step = 5;// According to your requirement
new Chart(ctx).Bar(plotData, {
scaleOverride: true,
scaleSteps: step,
scaleStepWidth: Math.ceil(max / step),
scaleStartValue: 0
});
回答by gvee
From your example page: http://qlu.in/0o3CTx/stats/
从您的示例页面：http: //qlu.in/0o3CTx/stats/
Change:
改变：
var myNewChart = new Chart(ctx).Bar(data,{});
To:
到：
var myNewChart = new Chart(ctx).Bar(data,{
scaleOverride: true,
scaleStepWidth: 1,
scaleSteps: 10
});
These options can be found here: http://www.chartjs.org/docs/#lineChart-chartOptions
这些选项可以在这里找到：http: //www.chartjs.org/docs/#lineChart-chartOptions
You have to specify all three parameters: scaleOverride, scaleStepWidthand scaleSteps
您必须指定所有三个参数：scaleOverride,scaleStepWidth和scaleSteps
回答by Vladimir verleg
Quik answer for those like me:
像我这样的人的快速回答：
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
