今天給大家帶來一款基於jQuery餅狀圖比例分佈數據報表。這款報表插件適用瀏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗。效果圖如下:
實現的代碼。
html代碼:
<div style="width: 600px; margin: 0 auto;"> <table id='myTable5'> <caption> 會員地區分佈</caption> <thead> <tr> <th> </th> <th> 河北 </th> <th> 河南 </th> <th> 湖北 </th> <th> 湖南 </th> <th> 山東 </th> <th> 山西 </th> </tr> </thead> <tbody> <tr> <th> 1200 </th> <td> 540 </td> <td> 300 </td> <td> 150 </td> <td> 180 </td> <td> 120 </td> <td> 180 </td> </tr> </tbody> </table> <table id='myTable1'> <caption> 會員性別分佈</caption> <thead> <tr> <th> </th> <th> 男 </th> <th> 女 </th> </tr> </thead> <tbody> <tr> <th> 1000 </th> <td> 450 </td> <td> 550 </td> </tr> </tbody> </table> </div>
js代碼:
<script type="text/javascript"> gvChartInit(); $(document).ready(function () { $('#myTable5').gvChart({ chartType: 'PieChart', gvSettings: { vAxis: { title: 'No of players' }, hAxis: { title: 'Month' }, width: 600, height: 350 } }); }); </script> <script type="text/javascript"> gvChartInit(); $(document).ready(function () { $('#myTable1').gvChart({ chartType: 'PieChart', gvSettings: { vAxis: { title: 'No of players' }, hAxis: { title: 'Month' }, width: 600, height: 350 } }); }); </script>