在Chart.js中将Y轴值从实数更改为整数

Question

我有一个图表,我想使用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);

Answer 1

我在新版本中以这种方式处理它:

new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value) {if (value % 1 === 0) {return value;}}
        }
      }]
    }
  }
});

Answer 2

试试这个,其中max是数据的最高值.

var steps = 3;
new Chart(ctx).Bar(plotData, {
    scaleOverride: true,
    scaleSteps: steps,
    scaleStepWidth: Math.ceil(max / steps),
    scaleStartValue: 0
});

Answer 3

在使用Chart.js的新版本2时,我无法让现有的答案为我工作,所以这是我在V2中解决这个问题所发现的:

new Chart(ctx, {type: 'bar', data: barChartData,
  options:{ 
    scales: {
      yAxes: [{
        ticks: {
          stepSize: 1
        }
      }]
    }
  }
});

Answer 4

我现在知道这是一个老问题，但在当前版本 (v2.9.3) 中，您只需将 y 轴刻度的精度设置为零即可获得整数：

options: {  
    scales: {
        yAxes: [{
            ticks: {
                precision: 0
            }
        }]
    }
}

Answer 5

正如 Ben Bloodworth 上面提到的，更简单的方法是添加选项（精度：0）。

目前在 3.7.1 版本中运行良好

 options: {
            scales: {
                y: {
                    ticks: {
                        precision: 0
                    }
                }
            }
        }

Answer 6

检查Chart.js文档,在全局配置部分中:

// Boolean - 即使绘图空间有scaleIntegersOnly:true,缩放是否应该坚持整数,而不是浮点数

Answer 7

如果你想以不同于0的数字开头,你必须考虑到这一点:

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
});

Answer 8

需要注意的是，Chart.js 有不同版本，并且它们有不同的选项对象。在版本 3 及更高版本中，x 轴和 y 轴是一个对象，而在版本 3 以下的版本中，它们被定义为数组。例如，
对于版本 3 及更高版本，

 options: {
        scales: {
            y: {
                ticks: {
                    precision: 0
                }
            }
        }
    }

对于版本 3 及以下版本，

options: {  
    scales: {
        yAxes: [{
            ticks: {
                precision: 0
            }
        }]
    }
}

另请注意，y和分别x变为yAxes和xAxex。