新手一枚，解决的问题喜欢记录，也许正好有人在网上迷茫的百度着。-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. python的内置模块re模块方法详解以及使用

    正则表达式 一.普通字符 .     通配符一个.只匹配一个字符 匹配任意除换行符"\n"外的字符(在DOTALL模式中也能匹配换行符 >>> import re ...

  2. 数据结构（三）串---KMP模式匹配算法之获取next数组

    (一)获取模式串T的next数组值 1.回顾 我们所知道的KMP算法next数组的作用 next[j]表示当前模式串T的j下标对目标串S的i值失配时,我们应该使用模式串的下标为next[j]接着去和目 ...

  3. python---django中orm的使用（5）数据库的基本操作(性能相关：select_related,和prefetch_related重点)（以及事务操作）

    ################################################################## # PUBLIC METHODS THAT ALTER ATTRI ...

  4. Java Message Service学习（一）

    一,背景 近期需要用到ActiveMQ接收Oozie执行作业之后的返回结果.Oozie作为消息的生产者,将消息发送给ActiveMQ,然后Client可以异步去ActiveMQ取消息. ActiveM ...

  5. sql查询语句优化

    http://www.cnblogs.com/dubing/archive/2011/12/09/2278090.html 最近公司来一个非常虎的dba  10几年的经验 这里就称之为蔡老师吧 在征得 ...

  6. JSBinding+Bridge.NET：Inspector拖变量支持

    之前的文档说了,JSB的设计是不允许gameObject上挂逻辑脚本的.原因很简单,在Js工程中根本就不存在C#形式的逻辑脚本,如果在Cs工程中挂上了,到了Js工程这边,直接Missing. 实际在使 ...

  7. Codeforces 238 div2 B. Domino Effect

    题目链接:http://codeforces.com/contest/405/problem/B 解题报告:一排n个的多米诺骨牌,规定,若从一边推的话多米诺骨牌会一直倒,但是如果从两个方向同时往中间推 ...

  8. Zookeeper笔记之quota

    一.节点配额概述 zookeeper中可以往节点存放数据,但是一般来说存放数据总是要有个度量的对吧,不然空间就那么大,如果某个节点将空间全占用了其它节点没得用了,所以zookeeper提供了一个对节点 ...

  9. 勒索软件Locky、Tesalcrypt等使用了新的工具躲避检测

    勒索软件Locky.Tesalcrypt等使用了新的工具躲避检测 今天我们发现Locky勒索软件家族使用一种新的工具来躲避检测,并且可能已经感染了很多节点. 自从我们通过AutoFocus智能威胁分析 ...

  10. 【C语言】十六进制形式输出应用程序

    1.前言 最近在看到同事写了一款封印病毒的程序,非常有意思!原理大致是将PE文件中的ASCII转换成HEX输出到文本中.这样做的目的是为了保存病毒样本的时候不会被杀毒软件查杀!然而却是delphi写的 ...