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

                                                   对比前                                                                                                                                       对比后


相关文章
|
前端开发 JavaScript
vue3使用pdfh5插件
vue3使用pdfh5插件
1184 0
|
存储 SQL 关系型数据库
[MySQL]学习笔记目录(尚硅谷宋红康MySQL数据库教程)
[MySQL]学习笔记目录(尚硅谷宋红康MySQL数据库教程)
|
关系型数据库 MySQL
MySQL 保姆级教程(七):用正则表达式进行搜索
MySQL 保姆级教程(七):用正则表达式进行搜索
|
Prometheus 监控 Cloud Native
Grafana 入门指南:快速上手监控仪表盘
【8月更文第29天】Grafana 是一款开源的数据可视化和监控工具,它允许用户轻松地创建美观的仪表盘和图表,以便更好地理解和监控数据。无论您是需要监控系统性能指标、应用程序日志还是业务关键指标,Grafana 都能提供灵活而强大的解决方案。本指南将带领您快速上手 Grafana,包括安装、配置以及创建第一个监控面板。
2646 2
|
网络协议 程序员 网络架构
UDP报文结构详解:一篇文章带你搞懂
**UDP报文格式简述:**包含源端口、目的端口、长度和检验和4个字段,用于传输层无连接通信。IP报文格式关键点:版本、首部长度、服务类型、总长度、标识、TTL和首部检验和,确保数据在网络中的路由与可靠性。了解这些基础对于网络协议学习至关重要。
757 2
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
275 1
pnpm无法加载文件 (解决方法 )
pnpm无法加载文件 (解决方法 )
|
JavaScript 前端开发 编译器
vue 代码高亮 prismjs 或 highlight.js插件的用法
vue 代码高亮 prismjs 或 highlight.js插件的用法
812 0
|
JavaScript
vue 代码高亮 highlight.js vue-highlightjs
vue 代码高亮 highlight.js vue-highlightjs
263 0