解决HighCharts饼图中如果所占百分比为0的时候,不显示边线及0%的方法

简介: var chart;$(document).ready(function() { chart = new 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 > 0)
                       return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %'; //这里进行判断(看这里)
               },
               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> 

                                                   对比前                                                                                                                                       对比后


相关文章
|
10月前
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
217 0
|
4月前
GEE图表——趋势线图表的加载和展示包含纵坐标间隔的设定(以某区域年均降水总量为例)
GEE图表——趋势线图表的加载和展示包含纵坐标间隔的设定(以某区域年均降水总量为例)
63 0
|
10月前
Echarts饼状图大小及其位置调整
Echarts饼状图大小及其位置调整
199 1
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
565 0
|
10月前
如何在 Highcharts 图中当所占百分比为 0 时不显示0%
如何在 Highcharts 图中当所占百分比为 0 时不显示0%
35 0
|
10月前
|
JSON 数据格式
Echarts折线图分段用不同颜色显示
Echarts折线图分段用不同颜色显示
104 0
|
算法 Java Apache
面向Java开发者的Echarts饼图百分比计算方法
面向Java开发者的Echarts饼图百分比计算方法
137 0
|
存储
MPAndroidChart_动态柱状图
需求:显示最近20条的数据,而且500毫秒秒刷新一次,每次都要求数据最新。
125 0
MPAndroidChart_动态柱状图
|
前端开发 JavaScript
css控制超出宽度 ...展示
css控制超出宽度 ...展示
187 0
Echarts堆叠柱状图百分比显示,tooltip展示百分比和数量
需求:将堆叠图每个类型的数据数值进行转换,计算出每一个横向柱状里每个类型占的百分比,然后显示
1510 0