首页 > 代码库 > highcharts 切换

highcharts 切换

2024-07-06 23:05:07   229人阅读

<!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">
            var options = {
                    chart:{
                        renderTo:‘container‘,
                        plotBackgroundColor:null,
                        plotBorderWidth:null,
                        plotShadow:false,
                        events:{
                            load:function(){
                            /*
                                var series = this.series[0];
                                setInterval(function(){
                                    var data = http://www.mamicode.com/[];>*/
                            }
                        }
                    },
                    credits:{
                        enabled:true,
                        href:‘http://www.cnblogs.com/xiaoxian1369/p/3765180.html‘,
                        text:‘qingyezhu‘
                    },
                    title:{
                        text:‘<b>HighchartsDemo1</b>‘
                    },
                    tooltip:{
                        pointFormat:‘{series.name}:<b>{point.y}</b>‘
                    },
                    labels:{
                        items:[{
                            html:‘http://www.cnblogs.com/xiaoxian1369/p/3765180.html" target="_blank">qingyezhu</a>‘,
                            style:{
                                left:‘532px‘,
                                top:‘160px‘
                            }
                        }],
                        style:{
                            color:‘red‘,
                            fontSize:45,
                            fontWeight:‘bold‘,
                            zIndex:1000
                        }
                    },
                    series:[{
                        name:‘Browser share‘,
                        data:[
                            [‘Firefox‘,45.8],
                            [‘IE‘,75.8],
                            [‘Safari‘,5.8],
                            [‘Opera‘,8.2],
                            [‘Others‘,12.7]
                            ]
                    }]
            };
            var chart;
            
            $(document).ready(function(){
                chart = new Highcharts.Chart(options);
                $("button.btnChart").click(function(){
                    var type = $(this).html();
                    if(type=="pie"){
                        options.tooltip.pointFormat = ‘{series.name}:<b>{point.percentage:.lf}%</b>‘;
                    }else{
                        options.tooltip.pointFormat = ‘{series.name}:<b>{point.y}</b>‘;
                    }
                    options.chart.type = type;
                    chart = new Highcharts.Chart(options);
                });
            });
        </script>
    </head>
    <body> 
        <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>
        <div id="container" style="width:800px;height:400px;"></div>
    </body>
</html>


联系
我们