HTML5统计图表插件_jQuery轻量级图表插件下载
2016-02-29 12:33:42  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 6445
• 2

分享一个HTML5 SVG跨设备的统计图Demo、采用jQuery和HTML5完成的、该图表插件是一款支持制作饼状图、圆环图、柱状图和线性图等图表的、代码量非常小、效果也非常好看 、已经封装成JS文件了、集成到项目代码非常少、下面是Demo的效果图

HTML代码

<div class="row">
<div class="large-4 small-4 columns">
  <ul data-pie-id="pie">
    <li data-value="60">Water Buffalo (60)</li>
    <li data-value="20">Bison (20)</li>
    <li data-value="12">Sheep (12)</li>
    <li data-value="32" data-text="Goats {{percent}} ({{value}} total)">Goat (32)</li>
    <li data-value="50">Shetland Pony (50)</li>
  </ul>
</div>
<div class="large-8 small-8 columns">
  <div id="pie"></div>
</div>
</div>

<div class="row">
<div class="large-4 small-4 columns">
  <ul data-pie-id="donut" data-options=´{"donut":"true"}´>
    <li data-value="60">Water Buffalo (60)</li>
    <li data-value="20">Bison (20)</li>
    <li data-value="12">Sheep (12)</li>
    <li data-value="32">Goat (32)</li>
    <li data-value="50">Shetland Pony (50)</li>
  </ul>
</div>
<div class="large-8 small-8 columns">
  <div id="donut"></div>
</div>
</div>

<div class="row">
<div class="large-4 small-4 columns">
  <ul data-bar-id="bar">
    <li data-value="200">Water Buffalo (300)</li>
    <li data-value="178">Bison (178)</li>
    <li data-value="12">Sheep (12)</li>
    <li data-value="32">Goat (32)</li>
    <li data-value="250">Shetland Pony (250)</li>
    <li data-value="99">Wild Ant (99)</li>
    <li data-value="78">Chameleon (78)</li>
  </ul>
</div>
<div class="large-8 small-8 columns">
  <div id="bar" style="height: 450px;"></div>
</div>
</div>

<div class="row">
<div class="large-4 small-4 columns">
  <ul data-line-id="line">
    <li data-y="0" data-x="0">Water Buffalo</li>
    <li data-y="10" data-x="10">Bison</li>
    <li data-y="20" data-x="20">Bison</li>
    <li data-y="30" data-x="30">Bison</li>
    <li data-y="35" data-x="40">Bison</li>
    <li data-y="50" data-x="200">Bison</li>
  </ul>
</div>
<div class="large-8 small-8 columns">
  <div id="line" style="height: 450px;"></div>
</div>
</div>

引入JS文件

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/js/vendor/dependencies.js"></script>
<script src="dist/js/pizza.js"></script>

JS代码

<script>
$(window).load(function() {
  Pizza.init();
  $(document).foundation();
});
</script>

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1hruj0GG 密码: pvww

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛