<!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="800px;height:400px;"></div> </body> </html>
