zoukankan      html  css  js  c++  java
  • 一款基于jQuery饼状图比例分布数据报表

    今天给大家带来一款基于jQuery饼状图比例分布数据报表。这款报表插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

    在线预览   源码下载

    实现的代码。

    html代码:

     <div style=" 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' },
                         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' },
                         600,
                        height: 350
                    }
                });
            });
        </script>

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

  • 相关阅读:
    Zookeeper安装-单机版
    Centos 7 安装 Redis 5
    java利用dom4j将xml字符串转换为json
    计算机科学导论笔记-计算机组成
    计算机科学导论笔记-数据运算
    计算机科学导论笔记-数据存储
    计算机科学导论笔记-数字系统
    计算机科学导论笔记
    springmvc03
    springmvc02
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4243219.html
Copyright © 2011-2022 走看看