这段时间比较空闲,便阅读公司做好的项目的源代码,学习学习同事的开发思路。
在项目中使用图表可以很好地提高人机交互的友好度,开发的时候看到项目的首页有两个很小的柱形图,很漂亮,便找到对应的代码看了看,发现非常简单,原来是jquery中的效果。
效果图:
要实现上面的效果,需要引入两个文件,core.css和jquery.core.js。 这里可以下载
代码如下:
<div class="table-box">
<div class="table-detail">
<h4 class="m-t-0 m-b-5"><b class="counter" id="todoCount">0</b></h4>
<p class="text-muted m-b-0 m-t-0"><fmt:message key="page.title.todo"/></p>
</div>
<div class="table-detail text-right">
<span data-plugin="peity-bar" data-colors="#2098BA,#ebeff2" data-width="60"
data-height="45">5,3,9,6,5,9,7,3,5,2,9,7,2,1</span>
</div>
</div>
5,3,9,6,5,9,7,3,5,2,9,7,2,1
这几个数字,一个对应一根柱子。 在jquery.core.js中搜索关键字:peity-bar,会发现还可以用类似的方法生成饼图、折线图、圆圈图。 缺点是:用这个方法生成的图表是静态的。 如果想要动态的图表,可以用highcharts或者echarts,highcharts和echarts的官网有很多实例,可以看看。
jquery实现静态柱形图(写死的数据,只为系统首页UI更美观)的更多相关文章
-
Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...
-
由于想要实现下载的文件可以进行选择,而不是通过<;a>;标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载,但是ajax实现的文件下载并不能触发浏览器的下载文件弹出框,这里通过模拟表单提交实现同样的效果。
由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载(这样的话ajax可以传递不同的参数),但是ajax实现的文 ...
-
jQuery 2.0.3 源码分析 数据缓存
历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放 ...
-
jQuery获取一般处理程序(ashx)的JSON数据
昨天有在开发的软件生产线生产流程,RFID扫描IC卡的数据,当中有用到jQuery获取一般处理程序(ashx)的JSON数据.今有把它写成一个小例子,望需要的网友能参考. 在网站中,创建一个一般应用程 ...
-
【转】Jquery ajax方法解析返回的json数据
转自http://blog.csdn.net/haiqiao_2010/article/details/12653555 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返 ...
-
使用&;lt;jsp:include&;gt;,不想写死URL,动态生成URL的解决的方法
JSP中文件包括有2种方式,静态包括和动态包括. 静态包括使用<%@ include file="" %>.动态包括使用<jsp:include page=&qu ...
-
angularjs和jquery前端发送以http请求formdata数据
formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...
-
fiddler 手机 https 抓包 以及一些fiddler无法解决的https问题http2、tcp、udp、websocket证书写死在app中无法抓包
原文: https://blog.csdn.net/wangjun5159/article/details/52202059 fiddler手机抓包原理 fiddler手机抓包的原理与抓pc上的web ...
-
使用jQuery的$.ajax()向MVC控制器Post数据
一整天不是在看书,就是做练习.今天还是把最难实现的怎样使用jQuery的$.ajax()向MVC控制器Post数据分享. 创建一个添加数据的存储过程: 在MVC应用程序下的Entities目录下,修改 ...
随机推荐
-
javascript中一些常见的兼容性问题
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...
-
bzoj3181: [Coci2012]BROJ
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
-
较老版本的AFNetworking使用心得
较老版本的 AFNetworking 下载链接 ( http://pan.baidu.com/s/14Cxga ) 将压缩包中的文件夹拖入xcode工程项目中并引入如下的框架 简单的 JOSN 解析例 ...
-
jdbc实现事务
//conn需要自己获取,这里我用的时springjdbcTemplate Connection conn = null; PreparedStatement pstm = null; try { c ...
-
本地数据下,radiobutton和图片组合,利用adapter+listview进行单选
浮生偷得半日闲,等接口定义的过程中,重新复习下adapter+listview实现单选的方法 主界面 <RelativeLayout xmlns:android="http://sch ...
-
mysql zip 版本配置方法
-\bin 指 C:\Program Files\MySQL\MySQL Server 5.6\bin 1.增加环境变量 "PATH"-"-\bin" 2.修改 ...
-
mysql主要应用场景 转载
前言 据说目前MySQL用户已经达千万级别了,其中不乏企业级用户.可以说是目前最为流行的开源数据库管理系统软件了.任何产品都不可能是万能的,也不可能适用于所有的应用场景.那么MySQL到底在什么场景下 ...
-
input文本框获取焦点和失去焦点判断
onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...
-
poj1094 topsort
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 32275 Accepted: 11 ...
-
JS代码的几个注意点规范
也谈谈规范JS代码的几个注意点 也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品, ...