highChartTable 切换

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">linebutton>
                <button class="btnChart">splinebutton>
                <button class="btnChart">piebutton>
                <button class="btnChart">areabutton>
                <button class="btnChart">columnbutton>
                <button class="btnChart">areasplinebutton>
                <button class="btnChart">barbutton>
                <button class="btnChart">scatterbutton>
            div>
            <table class="highchart" data-graph-container=".container" data-graph-type="line">
                <thead>
                    <tr>
                        <th>Monthth>
                        <th>Salesth>
                    tr>
                thead>
                <tbody>
                    <tr>
                        <td>Januarytd>
                        <td>8000td>
                    tr>
                    <tr>
                        <td>Februarytd>
                        <td>18000td>
                    tr>
                    <tr>
                        <td>Marchtd>
                        <td>18000td>
                    tr>
                    <tr>
                        <td>Apriltd>
                        <td>2000td>
                    tr>
                    <tr>
                        <td>Maytd>
                        <td>500td>
                    tr>
                tbody>
            table>
            <div class="container">div>
        div> 
    body>
html>

 

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

你可能感兴趣的:(javascript)