highChartTable 切换

最新推荐文章于 2024-08-18 10:54:05 发布

weixin_34419326

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量115

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoxian1369/p/3765261.html

版权

<!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>

转载于:https://www.cnblogs.com/xiaoxian1369/p/3765261.html

weixin_34419326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highChartTable 切换

<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" s...
复制链接

扫一扫