手机中环形饼图的制作方法【highhcart】

来源：互联网发布：java守护线程编辑：程序博客网时间：2024/05/17 07:28

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部分：暂时不公开，可以看我的列子！

0 0