一款基於jQuery餅狀圖比例分布資料報表

標籤：

今天給大家帶來一款基於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>

via：http://www.w2bc.com/Article/18257

一款基於jQuery餅狀圖比例分布資料報表