highcharts 饼图显示数量和百分比

最新推荐文章于 2024-06-23 07:11:34 发布

木凡007

最新推荐文章于 2024-06-23 07:11:34 发布

阅读量2.5w

点赞数 4

分类专栏： js区

js区专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<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>