Javascript highcharts 饼图显示数量和百分比实例代码
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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关推荐
-
ECharts仪表盘实例代码(附源码下载)
大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用. 效果演示 源码下载 HTML 首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性. <script src="echarts.min.js"></script> <div id=
-
js canvas实现适用于移动端的百分比仪表盘dashboard
本文为大家分享了canvas实现适用于移动端的百分比仪表盘,供大家参考,具体内容如下 由于最近工作中,经常会遇到一些动态百分比的仪表盘,一开始都是用图片样式方式实现: 但是随着越来越多的项目,决定用canvas绘制一个简易的仪表盘,便于以后项目中直接使用: 现版本只是书写为方法形式,也许之后会有时间对其优化为插件形式. 简简单单而已,以下直接给出代码和执行过程中的三张截图: <!doctype html> <html lang="en"> <head>
-
jquery插件canvaspercent.js实现百分比圆饼效果
在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的jquery插件(jq-canvaspercent.js),暂且版本1.0吧,到以后业务的变化在对其进行功能拓展: 暂时性用于页面中有多处百分比圆环的效果处理,还是不错的. jq-canvaspercent.js代码比较简单,以下直接给出插件代码和几张截图: /* * canvaspercent 0.1 * Copyright:HeavyShell * Date: 2016-06-27 * 利用
-
js canvas仿支付宝芝麻信用分仪表盘
这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id="canvas" width="400" height="700" data-score='724'></canvas> <!-- 设置data-score,分数区间[400, 900] --> 唉,总感觉不像.这个是G
-
使用javascript获取flash加载的百分比的实现代码
复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>flash download</title> </head> <body> <object id="movie" classid="clsid:d27cdb6e-ae6d
-
javascript下正则匹配百分比的代码
<script language="javascript"> var re = /^-?\d+%$/; alert(re.test('50%')); alert(re.test('-25%')); alert(re.test('3a5%')); </script>
-
javascript 计算两个整数的百分比值
复制代码 代码如下: ///计算两个整数的百分比值 function GetPercent(num, total) { num = parseFloat(num); total = parseFloat(total); if (isNaN(num) || isNaN(total)) { return "-"; } return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00 + &qu
-
JavaScript根据数据生成百分比图和柱状图的实例代码
复制代码 代码如下: <HTML> <head> <title>JS百分比图和柱状图</title> <xml:namespace prefix="v"/> <style> v\:* {behavior=url(#default#VML)} </style> <style> a:hover {color:maroon} h2 {color:#006600;
-
Javascript highcharts 饼图显示数量和百分比实例代码
Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=
-
妙用Ajax技术实现局部刷新商品数量和总价实例代码
1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码: <div class="section_container"> <!-- 购物车 --> <div id="shopping_cart"
-
Android 模拟新闻APP显示界面滑动优化实例代码
内容: 1.滑动优化(滑动时不加载图片,停止才加载) 2.第一次进入时手动加载 代码如下: 1.界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:
-
Vue.js 点击按钮显示/隐藏内容的实例代码
实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d
-
java中对list分页并显示数据到页面实例代码
有时候需要根据条件查询得出的数据较多,需要分页显示到页面上.这时点击下一页就不方便每次带查询条件在数据库中分页.可以在list中进行分页. page的model类: public class Page { private Integer currentPage;//当前页 private int pageSize;//每页显示记录条数 private int totalPage;//总页数 private List<?> dataList;//每页显示的数据 private int star;
-
JavaScript基于SVG的图片切换效果实例代码
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层
-
JavaScript实现实时更新系统时间的实例代码
一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()
-
JavaScript中boolean类型之三种情景实例代码
实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
JavaScript操作select元素和option的实例代码
废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t
-
JavaScript Base64 作为文件上传的实例代码解析
例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406