手機中環形餅圖的製作方法【highhcart】

          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部分：暫時不公開，可以看我的列子！