码迷,mamicode.com
首页 > 其他好文 > 详细

highChartTable 切换

时间:2014-06-03 15:18:45      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

bubuko.com,布布扣
<!doctype html> 
<html lang="en"> 
    <head> 
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/jquery.highchartTable.js"></script>
        <script>
            $(function () {
                $(table.highchart).highchartTable();
                $("button.btnChart").click(function(){
                    var type = $(this).html();
                    showShape(type);
                });
                function showShape(type){
                $(table.highchart).attr("data-graph-type",type);
                //$(‘table.highchart‘).attr("data-graph-container",".container");
                $(table.highchart).bind(highchartTable.beforeRender,function(event,config){
                    var series = config.series;
                    for(var i = 0,len = series.length;i < len;i ++){
                        series[i].type = type;
                    }
                }).highchartTable();
            }
            });            
        </script> 
        <style type="text/css">
        table th,table td{
            line-height:18px;
            text-align:left;
            padding:8px;
            border-top:1px solid #dddddd;
        }
        </style>
    </head>
    <body> 
        <div class="container1">
            <div>
                <button class="btnChart">line</button>
                <button class="btnChart">spline</button>
                <button class="btnChart">pie</button>
                <button class="btnChart">area</button>
                <button class="btnChart">column</button>
                <button class="btnChart">areaspline</button>
                <button class="btnChart">bar</button>
                <button class="btnChart">scatter</button>
            </div>
            <table class="highchart" data-graph-container=".container" data-graph-type="line">
                <thead>
                    <tr>
                        <th>Month</th>
                        <th>Sales</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>January</td>
                        <td>8000</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>18000</td>
                    </tr>
                    <tr>
                        <td>March</td>
                        <td>18000</td>
                    </tr>
                    <tr>
                        <td>April</td>
                        <td>2000</td>
                    </tr>
                    <tr>
                        <td>May</td>
                        <td>500</td>
                    </tr>
                </tbody>
            </table>
            <div class="container"></div>
        </div> 
    </body>
</html>
bubuko.com,布布扣

 

highChartTable 切换,布布扣,bubuko.com

highChartTable 切换

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/xiaoxian1369/p/3765261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!