HTML5统计图表插件_jQuery轻量级图表插件下载
2016-02-29 12:33:42 By: shinyuu
分享一个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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛