31

我想在 java 脚本库chartjs.org创建的图表中只显示整数而不是浮点数

这是示例图的链接

我是新手可以帮我配置这个吗

4

5 回答 5

31

这是使用 chart.js 2.5 的方法：只需将此回调函数添加到 yAxes ticks 属性

函数（值）{ if (Number.isInteger(value)) { 返回值；} }

或者只是在同一个地方使用 stepSize: 1 。

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>

于 2017-05-01T19:07:15.783 回答
24

从 2.8 版开始，您可以简单地将precisionticks 对象的属性添加为：

yAxes: [
        {
          ticks: {
            precision: 0,
          },
        },
      ],
于 2019-07-01T10:06:39.547 回答
6 
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
});
于 2014-11-05T09:14:19.060 回答
6

像我这样的人的快速回答：

   ticks: {
      beginAtZero: true,
      callback: function(value) {if (value % 1 === 0) {return value;}}
    }
于 2018-07-06T08:39:51.633 回答
3

从您的示例页面：http: //qlu.in/0o3CTx/stats/

改变：

var myNewChart = new Chart(ctx).Bar(data,{});

至：

var myNewChart = new Chart(ctx).Bar(data,{
    scaleOverride: true, 
    scaleStepWidth: 1, 
    scaleSteps: 10
});

这些选项可以在这里找到：http: //www.chartjs.org/docs/#lineChart-chartOptions

您必须指定所有三个参数scaleOverride：scaleStepWidth和scaleSteps

于 2013-09-09T10:30:10.137 回答