最近需要项目需要画图表，在网上搜索N多方法，最后选择用highcharts.js；
具体实例如下：
html部分
<body>
<div id="container" style=" 250px; height: 250px; margin: 0 auto"></div>
</body>
Script部分
首先引入jquery.js,然后再引入highcharts.js
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: '圆饼图例'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
};
var series= [{
type: 'pie',
name: '占百分比',
data: [
['火狐', 45.0],
['IE', 26.8],
{
name: '谷歌',
y: 12.8,
sliced: true,
selected: true
},
['苹果', 8.5],
['欧朋', 6.2],
['其他', 0.7]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
$('#container .highcharts-container svg').children(':last').text('');//去除底部链接
});
</script>
效果如下图：
