如何在图表中将实数的Y轴值更改为整数?
我有一张图表,我想使用Chart.js将其包含在我的网站中。 在Y轴上,它给了我实际的数字,而不是整数,这就是我想要的,这里是我现在的图片:
这就是代码:
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);
试试这个,其中max是数据的最高值。
var steps = 3; new Chart(ctx).Bar(plotData, { scaleOverride: true, scaleSteps: steps, scaleStepWidth: Math.ceil(max / steps), scaleStartValue: 0 });
我以新版本的方式处理它:
new Chart(ctx, { type: 'bar', data: chartData, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(value) {if (value % 1 === 0) {return value;}} } }] } } });
在使用Chart.js的新版本2时,我无法获得现有的答案,所以下面是我在V2中发现的解决此问题的方法:
new Chart(ctx, {type: 'bar', data: barChartData, options:{ scales: { yAxes: [{ ticks: { stepSize: 1 } }] } } });
如果你想从一个不同的数字开始,你必须考虑到这一点:
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 });
检查全局configuration部分中的Chart.js文档:
// Boolean – 比例是否应该保持为整数,即使有绘图空间也不会浮动scaleIntegersOnly:true,
希望能帮助到你。