HTML5统计图表插件_jQuery轻量级图表插件下载

分享一个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