Javascript highcharts 餅圖顯示數量和百分比實例代碼
最近公司項目需求有這樣一個功能模塊,highcharts 餅圖顯示數量和百分比 ,由于本人剛入門,看到這個需求不會寫,于是就上網搜下相關資料,覺得一篇還不錯記錄下。
<div class="piecleft" id="chart" style="height:350px; width: 350px;"></div><script type="text/javascript" charset="utf-8">var chart;$(document).ready(function() {  chart = new Highcharts.Chart({   chart: {     renderTo: 'chart'   },   title: {     text: '版本分布分析'   },   plotArea: {     shadow: null,     borderWidth: null,     backgroundColor: null   },   tooltip: {     formatter: function() {      return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+             Highcharts.numberFormat(this.y, 0, ',') +' 個)';     }   },   plotOptions: {     pie: {      allowPointSelect: true,      cursor: 'pointer',      dataLabels: {        enabled: true,        formatter: function() {         if (this.percentage > 4) return this.point.name;        },        color: 'white',        style: {         font: '13px Trebuchet MS, Verdana, sans-serif'        }      }     }   },   legend: {     backgroundColor: '#FFFFFF',     x: 0,     y: -30   },   credits: {     enabled: false   },    series: [{     type: 'pie',     name: 'Browser share',     data: [      ['1.1',3617],      ['1.2.1',3436],      ['1.0',416],      ['1.3',2],      ['1.2',1],      ['新增對比',5000]      ]   }]  });});</script>感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答