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 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python字符串处理实现单词反转
2017/06/14 Python
python 系统调用的实例详解
2017/07/11 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
如何基于Python批量下载音乐
2019/11/11 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
研究生考核个人自我鉴定
2014/03/27 职场文书
战略合作意向书范本
2014/04/01 职场文书