highcharts 切换

最新推荐文章于 2017-07-24 00:23:00 发布

weixin_33766168

最新推荐文章于 2017-07-24 00:23:00 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

本文介绍了一个使用Highcharts库实现的动态图表演示示例。通过不同的按钮切换，可以展示多种类型的图表，包括折线图、饼图等，并展示了如何通过JavaScript定时更新图表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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