如何在javascript chart.js中只显示整数 [英] How to display only integers in javascript chart.js

问题描述

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

I want to display only integers not floats in the chart created by java script library chartjs.org

以下是示例图表

我是新来的有人可以帮我配置这个

I am new to this Can someone help me to configure this

推荐答案

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

This is the way to do it using chart.js 2.5 : Just add this callback function to the yAxes ticks property

function（value）{ if（Number.isInteger（value））{返回值; }

function (value) { if (Number.isInteger(value)) { return value; } }

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

or just use stepSize: 1 in the same place.

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>

这篇关于如何在javascript chart.js中只显示整数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！