Javascript highcharts 饼图显示数量和百分比实例代码


Posted in Javascript onDecember 06, 2016

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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 #Javascript
详解ECharts使用心得总结
Dec 06 #Javascript
jQuery实现删除li节点的方法
Dec 06 #Javascript
详解springmvc 接收json对象的两种方式
Dec 06 #Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 #Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 #Javascript
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript引导程序
2008/10/26 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
浅析JavaScript动画
2015/06/10 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
Python中的TCP socket写法示例
2018/05/11 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python中Mako库实例用法
2020/12/31 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
策划主管的工作职责
2013/11/24 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
正科级干部考察材料
2014/05/29 职场文书
读后感作文评语
2014/12/25 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
MySQL插入数据与查询数据
2022/03/25 MySQL
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏