Chart.js Y轴数据以百分比展示

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

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

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

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

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

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

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

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

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

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

最后附上一张效果图:

原文地址:https://www.cnblogs.com/psjinfo/p/9415695.html

时间: 2024-09-30 14:40:12

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

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

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

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

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

echart折线堆叠图 Y轴数据不堆叠

<!DOCTYPE html> <html> <head></head> <body>     <div class="row form-inline form-ranking">     <div class="form-group">         <label class="control-label">店铺:</label>   

使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化数据

Download Chart.js你可以Chart.js从这封信中:https://github.com/chartjs/Chart.js/releases 使用VisualStudio创建新的ASP.NET项目并复制Chart.js在上一步中下载到root项目. 创建一个名为"Home.aspx"并添加如下代码行: 藏   复制码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehi

Chart.js | HTML5 图表绘制工具库(知识整理、中文注释、中文文档)

Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

WPF DevExpress Chart控件多Y轴,指定数据参考的Y轴

当Chart中有两个及以上的Y轴时,我们就要指明图表中的柱子或折线对应的是哪个Y轴了,这时候需要指明柱子或者折线的dxc:XYDiagram2D.SeriesAxisY属性,来设置对应的Y轴(dxc:XYDiagram2D.SeriesAxisY="{Binding ElementName=y2}"),其中Binding的ElementName就是需要对应的Y轴的Name(即这里的y2),界面代码如下: <dxc:ChartControl DataSource="{Bi

chart.js的X轴步长和X轴Labels旋转角度接口

一. 当初为什么选择chart.js 当初项目使用库是Zepto,Zepto能支持的chart处理库太少.也是为了使得项目比较轻量化,所以选择了chart.js. 但是最后的显示结果实在太差,放弃了char.js,还是使用jquery+highstock来完成chart需求. 总而言之,项目的chart需求较低,项目要求较轻量,可以使用chart.js. 这里列出几个chart.js缺少的接口. 二. chart.js缺少的接口 1. x轴步长. bug:数值很多,x轴显示的labels重合在一

Salesforce Lightning组件中使用Chart.JS实现数据可视化

之前尝试过Google Chart来实现数据可视化(可以查看我之前的博客Google Chart 之 Area Chart案例),但是很遗憾,Google Chart是无法集成到Salesforce Lightning中的,理由嘛,Google JavaScript会跟Google通信,而且具有脚本的外部引用,但是Sales force的安全策略是不允许这样做的,据我所知,到目前为止是没有解决方法的,所以我们来学习下Chart.JS,这个开源的第三方JS库提供了交互式可视化组件,关键是,它是可以

WPF Toolkit Chart--多Y轴显示

效果: <Window x:Class="Chart.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width=&quo