highcharts 饼图显示数量和百分比

最新推荐文章于 2024-12-27 09:23:51 发布

转载最新推荐文章于 2024-12-27 09:23:51 发布 · 2.5w 阅读

js区专栏收录该内容

13 篇文章

订阅专栏

通过使用高德charts库，实现版本分布的数据可视化，清晰展示不同版本的占比情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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