jquery实现静态柱形图(写死的数据,只为系统首页UI更美观)

时间:2022-06-21 07:05:20

这段时间比较空闲,便阅读公司做好的项目的源代码,学习学习同事的开发思路。

在项目中使用图表可以很好地提高人机交互的友好度,开发的时候看到项目的首页有两个很小的柱形图,很漂亮,便找到对应的代码看了看,发现非常简单,原来是jquery中的效果。

效果图:

jquery实现静态柱形图(写死的数据,只为系统首页UI更美观)

要实现上面的效果,需要引入两个文件,core.cssjquery.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更美观)的更多相关文章

  1. Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据

    前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...

  2. 由于想要实现下载的文件可以进行选择,而不是通过&lt&semi;a&gt&semi;标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载,但是ajax实现的文件下载并不能触发浏览器的下载文件弹出框,这里通过模拟表单提交实现同样的效果。

    由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载(这样的话ajax可以传递不同的参数),但是ajax实现的文 ...

  3. jQuery 2&period;0&period;3 源码分析 数据缓存

    历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放 ...

  4. jQuery获取一般处理程序&lpar;ashx&rpar;的JSON数据

    昨天有在开发的软件生产线生产流程,RFID扫描IC卡的数据,当中有用到jQuery获取一般处理程序(ashx)的JSON数据.今有把它写成一个小例子,望需要的网友能参考. 在网站中,创建一个一般应用程 ...

  5. 【转】Jquery ajax方法解析返回的json数据

    转自http://blog.csdn.net/haiqiao_2010/article/details/12653555 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返 ...

  6. 使用&amp&semi;lt&semi;jsp&colon;include&amp&semi;gt&semi;&comma;不想写死URL&comma;动态生成URL的解决的方法

    JSP中文件包括有2种方式,静态包括和动态包括. 静态包括使用<%@ include file="" %>.动态包括使用<jsp:include page=&qu ...

  7. angularjs和jquery前端发送以http请求formdata数据

    formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...

  8. fiddler 手机 https 抓包 以及一些fiddler无法解决的https问题http2、tcp、udp、websocket证书写死在app中无法抓包

    原文: https://blog.csdn.net/wangjun5159/article/details/52202059 fiddler手机抓包原理 fiddler手机抓包的原理与抓pc上的web ...

  9. 使用jQuery的&dollar;&period;ajax&lpar;&rpar;向MVC控制器Post数据

    一整天不是在看书,就是做练习.今天还是把最难实现的怎样使用jQuery的$.ajax()向MVC控制器Post数据分享. 创建一个添加数据的存储过程: 在MVC应用程序下的Entities目录下,修改 ...

随机推荐

  1. javascript中一些常见的兼容性问题

    下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...

  2. bzoj3181&colon; &lbrack;Coci2012&rsqb;BROJ

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  3. 较老版本的AFNetworking使用心得

    较老版本的 AFNetworking 下载链接 ( http://pan.baidu.com/s/14Cxga ) 将压缩包中的文件夹拖入xcode工程项目中并引入如下的框架 简单的 JOSN 解析例 ...

  4. jdbc实现事务

    //conn需要自己获取,这里我用的时springjdbcTemplate Connection conn = null; PreparedStatement pstm = null; try { c ...

  5. 本地数据下,radiobutton和图片组合,利用adapter&plus;listview进行单选

    浮生偷得半日闲,等接口定义的过程中,重新复习下adapter+listview实现单选的方法 主界面 <RelativeLayout xmlns:android="http://sch ...

  6. mysql zip 版本配置方法

    -\bin 指 C:\Program Files\MySQL\MySQL Server 5.6\bin 1.增加环境变量 "PATH"-"-\bin" 2.修改 ...

  7. mysql主要应用场景 转载

    前言 据说目前MySQL用户已经达千万级别了,其中不乏企业级用户.可以说是目前最为流行的开源数据库管理系统软件了.任何产品都不可能是万能的,也不可能适用于所有的应用场景.那么MySQL到底在什么场景下 ...

  8. input文本框获取焦点和失去焦点判断

    onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...

  9. poj1094 topsort

    Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 32275   Accepted: 11 ...

  10. JS代码的几个注意点规范

    也谈谈规范JS代码的几个注意点 也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品, ...