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