一款基于jQuery饼状图比例分布数据报表

来源：互联网发布：绵阳软件培训学校编辑：程序博客网时间：2024/06/07 05:57

今天给大家带来一款基于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>

0 0