highcharts 切换

时间：2014-06-03 16:34:55 阅读：230 评论：0 收藏：0 [点我收藏+]

<!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 = [];
                                    data.push([‘Firefox‘,Math.random()]);
                                    data.push([‘IE‘,Math.random()]);
                                    data.push([‘Safari‘,Math.random()]);
                                    data.push([‘Opera‘,Math.random()]);
                                    data.push([‘Others‘,Math.random()]);
                                    series.setData(data);
                                },2000);
                                */
                            }
                        }
                    },
                    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>

bubuko.com,布布扣

highcharts 切换,布布扣,bubuko.com

highcharts 切换

标签：c style class blog code java

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行