<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts 示例，Highcharts 饼图 - www.jb200.com</title>
<script type="text/
javascript" src="
jquery-1.8.2.min.js"></script>
<script src="highcharts.js"></script>
<script type="text/javascript">
var options = {
chart: {},
title: {},
tooltip: {},
plotOptions: {},
series: []
};
$(document).ready(function() {
options.chart.renderTo = 'container';
options.chart.plotBackgroundColor=null;
options.chart.plotBorderWidth=null;
options.chart.plotBorderWidth = false;
options.title.text='测试饼图';
options.tooltip.pointFormat='{series.name}: <b>{point.percentage}%</b>';
options.tooltip.percentageDecimals=1;
options.plotOptions.pie={
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
options.series = [{
type: 'pie',
name: '使用情况',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}];
chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
