highhcarts是一个很好的jquery封装的图标制作工具,进去只做了一个手机图标的项目,用的是highhcarts,其API地址是:http://api.highcharts.com/highcharts
我的饼图的效果如图
点击每一个块,下面出现相应的介绍字段,默认第一个选中!
我调用的是json中的数据。color可以自己制定,自己封装数组!
代码如下:
<div id="container" style="width: 220px; height: 220px; margin: 0 auto;"><img src="images/load.gif" border="0" class="loaddingimag" style="padding-top:100px;" /></div>
js部分
$('#container').highcharts({
chart: {
type: 'pie'
// options3d: {
// enabled: true,
// alpha: 45,
// beta: 0
// }
},
title: {
text: '工程总费用',
align: 'center',
style: {
// color: '#FF00FF',
fontSize: '12px'
},
verticalAlign: 'middle',
y: 0
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
//showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
//depth: 25,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
point: {
events: {
click:function(e){
console.dir(this);
var titlename=this.name;
var price=this.y;
var percent=parseFloat(this.percentage.toFixed(2));
var showhtml=' <div class="uc-t uc-t2 ub c-m2 t-bla ub-ac umh2 lis gofod curp" style="width:50%;margin:0 auto; border: 1px solid #d2d2d2;" > <div class="ub-f1 fz13 pdr tx-c" ><span class="projecttitle">'+titlename+'</span> <span class="projec_percent">'+percent+'%</span><br/><span class="realprice">'+price+'元</span></div></div> ' ;
$("#clickshowinfos").html(showhtml);
}
}
},
shadow: false,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
innerSize: '60%',
data: arr
}]
});
data部分:暂时不公开,可以看我的列子!