注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery环形百分比统计图表插件raphael

UI fishcity 4061浏览

环形百分比统计图表

raphael一款非常富有创意的图表插件,通过它可制作出各类图表、图片裁剪、旋转插件等。今天分享的是raphael与jquery结合制作一个动感的环形百分比统计图表。这款jQuery环形百分比图表插件有以下特点:

  1. 图表外观是环形的,因此也十分特别。

  2. 图表数据有百分比显示,你可以直截了当地看到当前数据情况。

  3. 鼠标滑过环形时,将突出显示该项数据,并显示百分比。

jquery实例:raphael使用方法

引入核心文件

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

构建html

<div id="diagram"></div>	
<div class="get">
  <div class="arc"> <span class="text">JavaScript</span>
    <input type="hidden" class="percent" value="95" />
    <input type="hidden" class="color" value="#97BE0D" />
  </div>
  <div class="arc"> <span class="text">CSS3</span>
    <input type="hidden" class="percent" value="90" />
    <input type="hidden" class="color" value="#D84F5F" />
  </div>
  <div class="arc"> <span class="text">HTML5</span>
    <input type="hidden" class="percent" value="80" />
    <input type="hidden" class="color" value="#88B8E6" />
  </div>
  <div class="arc"> <span class="text">PHP</span>
    <input type="hidden" class="percent" value="53" />
    <input type="hidden" class="color" value="#BEDBE9" />
  </div>
  <div class="arc"> <span class="text">MySQL</span>
    <input type="hidden" class="percent" value="45" />
    <input type="hidden" class="color" value="#EDEBEE" />
  </div>
</div>

更参数请参考实例或官方文档

转载请注明:jQ酷 » jQuery环形百分比统计图表插件raphael

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。