Raphael.js画带间隙的实心饼图

<script type="text/javascript" src="../js/dist/raphael-min.js"></script>

//调用，先定义画布，pirs为id。pieChart中传入半径，起始点，需要展示的数据等
var values = [parseInt('25', 10), parseInt('25', 10), parseInt('25', 10), parseInt('25', 10)],labels = ['清醒时长','深睡眠时长','浅睡眠时长','初睡眠时长'],valuesP = ["25%","25%","25%","25%"],color = ['#DD7C8A','#EABF85','#5FBBF0','#4AD7D1'];Raphael("pirs", 260, 260).pieChart(130, 130, 118, values, labels, "#fff", color, valuesP);//传入的参数可以根据需要自定义Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke, valuesC, valuesP) {var paper = this,rad = Math.PI / 180,chart = this.set();function sector(cx, cy, r, startAngle, endAngle, params) {var x1 = cx + r * Math.cos(-startAngle * rad),x2 = cx + r * Math.cos(-endAngle * rad),y1 = cy + r * Math.sin(-startAngle * rad),y2 = cy + r * Math.sin(-endAngle * rad);return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);}var angle = 0,total = 0,start = 0,process = function (j) {var value = values[j],angleplus = 360 * value / total,popangle = angle + (angleplus / 2),color = Raphael.hsb(start, .75, 1),ms = 500,delta = 30,bcolor = Raphael.hsb(start, 1, 1),colorC = valuesC[j],valuess = valuesP[j],p = sector(cx, cy, r, angle, angle + angleplus, {fill: colorC, stroke: stroke, "stroke-width": 7}),//stroke-width区块间隙大小txt = paper.text(cx + (r - 50) * Math.cos(-popangle * rad), cy + (r - 50) * Math.sin(-popangle * rad), valuess).attr({fill: "#fff", stroke: "none", opacity: 1, "font-size": 20});p.mouseover(function () {p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");//txt.stop().animate({opacity: 1}, ms, "elastic");}).mouseout(function () {p.stop().animate({transform: ""}, ms, "elastic");//txt.stop().animate({opacity: 1}, ms);});angle += angleplus;chart.push(p);chart.push(txt);start += .1;};for (var i = 0, ii = values.length; i < ii; i++) {total += values[i];}for (i = 0; i < ii; i++) {process(i);}return chart;
};

效果(鼠标进入区块会有动效)：

另使用echarts制作图形也是相当好的选择，功能丰富，官网有demo直接可以使用

但是在本人实现业务过程中发现echarts饼图在导出pdf之后无法显示，故弃用

Raphael.js画带间隙的实心饼图相关推荐

使用raphael.js绘制带全省标识的中国地图_1
https://www.helloweba.net/javascript/242.html 此链接为最初的源码网站.经过修改的在我这里. raphael.js // ┌──────────────── ...
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）
首先,这里有个g.raphael.js的范例文章,可以直接看,我就不转载了: http://www.cnblogs.com/lhb25/archive/2013/01/09/gRaphael-java ...
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（上）
首先介绍一下什么是g.raphael.这个又要说到什么是raphael.js.raphael是一个javascript库,可以用来跨浏览器绘制各种图形,只要是你想得到的图形都可以用raphael绘制出 ...
用d3.js画出带米字格的汉字
最终要实现的效果: 我们先用d3.js画出一个带米字格的汉字: <!DOCTYPE html> <html><head><meta charset=" ...
Raphael JS
Raphael Javascript是一个 Javascript的矢量库. 它可以处理SVG.VML格式的矢量图,它使用SVG W3C推荐标准和VML作为创建图形的基础,你可以用Javascript ...
Raphael Js矢量库API简介：
Raphael Js矢量库API简介: Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQ ...
VML 画统计柱状、饼图、折线
   <!-- 高度定义有待改进 c ...
强大的矢量图形库：Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...

Raphael.js画带间隙的实心饼图

Raphael.js画带间隙的实心饼图相关推荐

最新文章

热门文章