jQuery插件高级图表绘制2D圆环图效果示例【附演示源码下载】

本文实例讲述了jQuery插件高级图表绘制2D圆环图效果。分享给大家供大家参考，具体如下：

1、实例代码：

！2D圆环图/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/high charts。js '/script script type=' text/JavaScript ' $(function(){ var colors=high charts。getoptions().颜色，类别=['花', '树', '鱼', '鸟', '鲸],名称='浏览器品牌'，数据=[{ y: 55.11，color: colors[0]，明细： { name: '花的种类，类别： ['梅花', '桃花', '梨花', '樱花]，data: [13.6，7.35，33.06，2.81]，color: colors[0] }，{ y: 21.63，color: colors[1]，明细： { name: '树的种类，类别： ['樟树', '桉树', '茶树', '桃树', '梨树]，data: [15.20，3.83，18.58，13.12，45.43]，color: colors[1] }，{ y: 11.94，color: colors[2]，明细： { name: '鱼的种类，类别： ['鲫鱼', '鲢鱼', '草鱼', '青鱼', '鲦鱼','鳙鱼', '鲥鱼]，data: [41.12，10.19，11.12，14.36，21.32，9.91，17.50]，color: colors[2] }，{ y: 7.15，color: colors[3]，明细： { name: '鸟的种类，类别： ['松鸡', '卷尾', '鹪鹩', '岩鹨', '山鹑','画眉', '金鸡]，data: [14.55，19.42，16.23，16.21，18.20，23.19，10.14]，color: colors[3] }，{ y: 2.14，color: colors[4]，明细： { name: '鲸的种类，类别： ['须鲸', '蓝鲸', '虎鲸]，data: [ 24.12，18.37，32.65]，color : colors[4]}]；//构建物种数据var物种数据=[]；var SpeDATa=[]；for(var I=0；一。数据。长度；i ) { //添加物种数据物种数据。推送({ name :类别[i]，y:数据[I]).y，颜色：数据[i].color })；for(var j=0；j数据[i]。明细。数据。长度；j){ var亮度=0.4-(j/data[I]。向下钻。数据。长度)/5；spedata。推送({ name : data[I])。向下钻。分类[j]，y :数据[I]。向下钻。数据[j]，颜色：高级图表.颜色（数据[i].颜色)。变亮（亮度)。get()})；} } //创建圆环图$('#donutChart ').高级图表({ chart: { type: 'pie' }，title: { text: '物种数量及其比例}，Yaxis : { title : { text : '比例} }，plot options 3360 { pie : { shadow : true，center: ['50% '，' 50%'] } }，tooltip : { value suffix : ' % ' }，series: [{ name: '物种，data: speciesData，size: '70% '，data labels : { formatter : function(){ return this。y 5？这个。重点。名称：为空；}，color: 'white '，distance: -30 } }，name: '数量，data: speData，size: '80% '，innerSize: '80% '，data labels : { formatter : function(){ return this。y 1？这个。重点。把这个命名为“:”。y“%”: null；} } }] });});/script/head body div id=' Donutchart ' style=' width : 1250 px；高度： 550像素；边距： 0自动/div/body/html 2，运行效果图：

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。