如何在 javascript Chart.js 中仅显示整数

2024-04-06

我想在java脚本库创建的图表中仅显示整数而不是浮点数Chartjs.org http://www.chartjs.org/docs/

这是示例的链接graph http://qlu.in/0o3CTx/stats/

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


这是使用 Chart.js 2.5 执行此操作的方法: 只需将此回调函数添加到 yAxes ticks 属性即可

函数(值){ if(Number.isInteger(值)){ 返回值; } }

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

js小提琴:https://jsfiddle.net/alelase/6f8wrz03/2/ 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 javascript Chart.js 中仅显示整数 的相关文章

随机推荐

  • 嵌套 Linq Min() 使 Visual Studio 崩溃

    我有一段代码使 Visual Studio 2008 IDE 运行速度非常慢 消耗大量内存 最终导致其崩溃 我怀疑 VS 达到了操作系统内存限制 以下代码不是我的真实应用程序代码 但它模拟了问题 本质上 我试图使用 LINQ 找到树中的最小
  • linux下限制R内存使用

    我们在 Linux 集群环境中运行 R 当用户无意中使用 R 进程占用所有内存时 头节点会出现几次挂起 linux下有没有办法限制R内存使用 我不想建议全局 ulimit 但这可能是唯一的出路 There s unix rlimit as
  • $.getJSON 解析器错误尝试调用 API

    我正在尝试使用 Clipped API http clipped me api html http clipped me api html 返回 JSON 但遇到了一些麻烦 我正在使用 getJSON 在 Chrome 的 JS 控制台中我
  • 是否有任何编程语言支持定义原始数据类型的约束?

    昨晚我在想编程语言可以有一个功能 我们应该能够限制分配给原始数据类型的值 例如 我应该可以说我的 int 类型变量只能具有 0 到 100 之间的值 int lt 0 100 gt progress 然后 这将在所有情况下充当普通整数 除非
  • 在Android中使用OpenCV将NV21转换为RGB

    我正在尝试在 Android 中使用 OpenCV 因此 我首先通过并排放置两个 SurfaceView 来测试 OpenCV 其中一个SurfaceView用于预览相机的输出 输出格式显然是NV21 另一个SurfaceView通过Ope
  • 如何在 Jersey 客户端中发送 DELETE 请求中包含的数据?

    我在 Jersey 2 x 中有以下服务器端代码 Path store remove from group DELETE Consumes MediaType APPLICATION FORM URLENCODED Produces Med
  • 自定义会员资格提供商*没有*数据库?

    我一直在寻找有关 MVC 4 中成员资格提供程序更改的各种 SO 问题 博客文章等 虽然我喜欢其中的许多更改和简化 尤其是开箱即用的外部登录 支持 我还无法找到一件看似简单的事情 如何使用使用其他数据源的自定义成员 角色提供者覆盖成员资格
  • 如何从 viewcontainer 角度删除特定视图

    在下面的示例中 https stackblitz com edit angular 1acvol https stackblitz com edit angular 1acvol 我使用创建了多个视图TemplateRef并将它们附加到同一
  • 异步加载车把模板

    我正在尝试编写一个函数 该函数将为我提供一个已编译的车把模板 我将所有模板都放在单独的文件中 使用 ajax 调用来获取模板并编译它以供使用 但我需要使用承诺 以便我可以实际使用它 function getTemplate name get
  • Python,OpenCV:增加图像亮度而不溢出UINT8数组

    我正在尝试增加灰度图像的亮度 cv2 imread 返回一个 numpy 数组 我正在向数组的每个元素添加整数值 从理论上讲 这会增加它们中的每一个 之后我就可以将上限设置为 255 并获得具有更高亮度的图像 这是代码 grey cv2 i
  • 连接建立后如何从服务器(使用连接列表)向客户端发送命令?

    我有这两个类 它们是我的服务器应用程序 桌面 的一部分 需要在建立连接后将命令发送回客户端 当我尝试这样做时 clients i Send info the Send 例行公事 的监听器 cs 可以访问 但我有以下语法错误 怎么解决这个问题
  • CSS 关键帧动画与平移变换在 IE 10 和 Firefox 中捕捉到整个像素

    看起来 IE 10 和 Firefox 在使用 css 关键帧动画中的平移 2d 变换对元素的位置进行动画处理时 都会将元素捕捉到整个像素 Chrome 和 Safari 没有 看起来a lot制作微妙运动动画时效果更好 动画是通过以下方式
  • 2 个不同长度的排序数组的中值

    如何找到长度分别为 m 和 n 的 2 个已排序数组 A 和 B 的中位数 我已经搜索过 但大多数算法都假设两个数组的大小相同 我想知道如果 m n 我们怎样才能找到中位数 考虑例子 A 1 3 5 7 11 15 其中 m 6 B 2 4
  • 在 AngularJS 中处理来自代理的 HTTP 302 响应

    我有一个反向代理 可以检查多个应用程序的全局身份验证 当用户断开连接但仍尝试使用我的应用程序时 代理会发送 302 响应 HTTP 1 1 302 Found Date Wed 11 Sep 2013 09 05 34 GMT Cache
  • 生成递归目录搜索的 XML 映射

    我正在阅读一个列表 其中某些组件下有大量档案 例如 component1 filelocation1 a11 ear component1 filelocation1 a12 ear component2 filelocation2 a2
  • 如何在Rails 3.2 erb中使用eval在运行时执行存储在字符串中的视图代码?

    我们想要做的是存储一大块erb代码在一个string然后在运行时执行代码 这是我们所做的测试 从工作的 erb 文件中取出一段代码 使用 eval 重写 erb 文件 这是取出的 erb 代码块 tr th th th th th th t
  • [Laravel]:SQLSTATE[3F000]:模式名称无效

    构建 Laravel 项目 v 5 4 当我运行时php artisan migrate我收到以下错误消息 Illuminate Database QueryException SQLSTATE 3F000 Invalid schema n
  • Mockk-spyk 模拟方法仅一次

    I have spyk from mockk图书馆 my spyk My 后来我嘲笑其中一种方法返回类似的内容 every my method someString returns something 我正在创建这个spyk in a Be
  • 获取具有默认值的参数列表

    我使用 ALL ARGUMENTS 来获取 oracle 10g 中的参数列表 但我找不到参数是否有默认值 我怎样才能做到呢 您可能需要在 10g 中采用 plsql 编程 如下面的代码示例所示 从某种意义上说 这个解决方案肯定是蛮力的 因
  • 如何在 javascript Chart.js 中仅显示整数

    我想在java脚本库创建的图表中仅显示整数而不是浮点数Chartjs org http www chartjs org docs 这是示例的链接graph http qlu in 0o3CTx stats 我是新手 有人可以帮我配置这个吗