新手一枚，解决的问题喜欢记录，也许正好有人在网上迷茫的百度着。-0-

最近使用Chart.js做折线图的报表展示，直接显示整数啥的很好弄毕竟例子直接在哪里可以用，百分比就没办法了。百度慢慢汲取营养，虽然总是几篇文章复制粘贴，但还有有收获，然后自己捣鼓半天总算是弄出来了。。。

首先参考: http://www.chartjs.org/docs/latest/ 引用js，学习基本等等。。。

然后数据什么的就不说了直说怎么展示，

在配置文件中yAxes>ticks>callback 中设置你需要在Y轴展示的数据格式。

label是你的数据，index是下表，labels数组，我这里传过来的是小数所以使用Math.floor取值然后加上"%"符号。

下面 tooltips 使用展示你鼠标悬浮显示数据，对应着你上面的数据也需要做修改。。。。

备注:如果多条数据想使用同一个Y轴的话不要加 stacked: true

如果想看加上什么效果，或者上面的设置都是什么样的，可以自己调试，毕竟自己看到数据就懂了

主要是学习，所以希望看到的有更好办法的求指导。。。谢谢！

最后附上一张效果图:

Chart.js Y轴数据以百分比展示的更多相关文章

  1. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  2. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  3. echarts使用记录（三）：x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  4. Echarts在手机端y轴数据过大，显示不全

    解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...

  5. (摘)Chart Y轴设置为百分比

    放置一个Chart控件,未做任何设置:然后编写代码: //设置chart2.Legends[0].Enabled = false;//不显示图例 chart2.ChartAreas[0].BackCo ...

  6. highcharts 柱状图在柱子顶部显示y轴数据

    var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...

  7. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  8. 利用h5,chart.js监测手机三轴加速度，用以研究计步算法等

    用window.DeviceMotionEvent来判断手机浏览器是否支持访问硬件资源,window.addEventListener('devicemotion',deviceMotionHandl ...

  9. JS组件系列——开源免费图表组件：Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

随机推荐

  1. 【疑点】js中的break,continue和return到底怎么用？

    转: [疑点]js中的break,continue和return到底怎么用? 为什么要说个?好像很简单,但是我也会迷糊,不懂有时候为什么要用return,然而break和continue也经常和他放在 ...

  2. 图像处理之规则裁剪(Resize)

    1 图像裁剪 在实际工作中,经常需要根据研究工作要求对图像进行裁剪(Subset Image),按照实际图像分幅裁剪的过程,可以将图像分幅裁剪分为两种类型:规则分幅裁剪(Rectangle Subse ...

  3. Git与GitHub学习笔记（三）.gitignore文件忽略和删除本地以及远程文件

    一.Git提供了文件忽略功能.当对工作区某个目录或者某些文件设置了忽略后,git将不会对它们进行追踪 HELP:如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件 问题:最近 ...

  4. js 隐藏代码生成工具

    昨天写了篇<js 奇葩技巧之隐藏代码>,今天来写个工具方便大家生成吧.在昨天算法基础上优化了解码算法,采用立即函数运行.有两种模式可供选择: 1. eval  全局模式,比如你定义的 va ...

  5. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  6. J2EE完全手册（二）

    1.2 客户端 (Web客户端,应用程序客户端) 1.2.1 Web客户端: 一般简单讲,就是显示由在Web层的web组件中生成的包含Html 及 XML标记语言的动态Web页面(.jsp[.do]) ...

  7. Windows bat 学习（高级）

    有一种叫做 Command Processor Extensions 的东西,即命令处理器扩展.他会使命令更加高级,功能更多. 在 cmd 里可以使用 ECHO %CMDEXTVERSION% 查看当 ...

  8. c++刷题（43/100）矩阵旋转打印

    题目1:矩阵旋转打印 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则 ...

  9. 315道Python面试题答案

    目录 Python基础篇 1:为什么学习Python 2:通过什么途径学习Python 3:谈谈对Python和其他语言的区别 Python的优势: 4:简述解释型和编译型编程语言 5:Python的 ...

  10. AF_INET域与AF_UNIX域socket通信原理对比

    原文 1.  AF_INET域socket通信过程 典型的TCP/IP四层模型的通信过程. 发送方.接收方依赖IP:Port来标识,即将本地的socket绑定到对应的IP端口上,发送数据时,指定对方的 ...