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 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php json转换相关知识(小结)
2018/12/21 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
javascript数组的使用
2013/03/28 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
vue.js的提示组件
2017/03/02 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python 文件读写操作实例详解
2014/03/12 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
python之yield和Generator深入解析
2019/09/18 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
电力公司个人求职信范文
2014/02/04 职场文书
个人授权委托书范文
2014/09/21 职场文书
2015年暑期见闻
2015/07/14 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技