进程 LeetCode 存量客户 struct ssh dtel语言 smtp History.js 建筑资质 vue原理 jquery获取下一个元素 java多行注释 mysql设置自增初始值 pcm接口 mysql查询结果拼接 python循环 python正则提取字符串 python加法 python中的map函数 python做界面 java运算符 java基础学习 javastring类型 java系统时间 java数组 allowoverride m4a转mp3格式转换器 网络是怎样连接的 通达信金融终端官网 相机权限 js数组移除指定元素 firework下载 god2iso PCCAD mac强制重启 小票打印 一键隐藏 js转数字 mix2s拆机 ajaxpro
当前位置: 首页 > 学习教程  > 编程学习

基于ocanvas.js的饼图实例展示

2021/1/9 2:16:59 文章标签: 复合条饼图

ocanvas是一个全局对象,它包含了所有的模块,以及核心构造函数和一些其他的方法。 #方法及属性 1.oCanvas.create(canvas,background,clearEachFrame,drawEachFrame,fps,plugins,disableScrolling) 设置新的核心实例。参数设置: canva…

ocanvas是一个全局对象,它包含了所有的模块,以及核心构造函数和一些其他的方法。

#方法及属性
1.oCanvas.create(canvas,background,clearEachFrame,drawEachFrame,fps,plugins,disableScrolling
   设置新的核心实例。参数设置:
   canvas:指定的canvas元素,字符串或者一个HTMLCanvasElement;
   background:设置画布背景色;默认值:“透明”
   clearEachFrame:指定时间轴模块是否在每帧之前清除画布;默认值:true
   drawEachFrame:指定时间轴模块是否在每帧之后绘制画布;默认值:true
   fps:时间轴和动画模块每秒的帧数将运行;默认值:30
   plugins:设置应在此核心实例上使用的插件。该数组包含插件名称;默认值:[]
   disableScrolling:禁用在触摸设备上滚动。默认值:false

2.canvas实例.display.arc({})  属性:
   direction:定义角度的方向,可以是clockwiseanticlockwise。默认:clockwise
   end:结束角度。值0对应于east
   pieSection:默认值:false
   radius:弧的半径
   start:起始角度。值0对应于east

3.canvas实例.display.text({}) 创建文本对象

#画图实例(复合饼图、双饼图)

//html代码
<div class="canvasPie">
	<div class="page3"></div>
	<canvas id="canvas"></canvas>
</div>
//JavaScript代码
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ocanvas.min.js"></script>
<script type="text/javascript">
//定义所需参数
var dpr=Number($("html").attr("data-dpr")),//获取当前的dpr
    st=dpr>1?1: 2,//缩放系数
    fs=Number($("html").css("fontSize").replace("px",""))*st,//获取根目录下的字体大小
    fst=fs/st,//获取根目录下的字体大小
 	data = [60,90,30,50,100,30], //各扇形角度
	scale = [0.3,0.5,0.6,0.8,0.4,1],  //各深色扇形的直径比例
	width = $("#canvas").width(),  //画布宽度
	height = $("#canvas").height(),  //画布高度
	colorBg=["rgba(139,113,205,.3)","rgba(237,209,1,.3)","rgba(0,124,226,.3)","rgba(1,162,217,.3)","rgba(80,194,135,.3)","rgba(242,171,48,.3)"],  //各浅色扇形背景色
	color=["#8b71cd","#edd101","#007ce2","#01a2d9","#50c287","#f2ab4e"];  //各深色扇形背景色

//创建画布
var canvas = oCanvas.create({
	canvas: "#canvas",
	width: width,
	height: height,
	fps: 60
});
//设置画布宽高
canvas.width = width;
canvas.height = height;
var arc = canvas.display.arc({
	x: canvas.width / 2,
	y: canvas.height / 2,
	radius: canvas.height / 3,
	pieSection: true
});


//添加点击事件并重绘
function bindEvent(item){
	item.bind("mouseenter touchenter", function () {
		var index = this._index;
		bgPie[index].radius = canvas.height / 3 + 10;
		bgPie[index].fill = "#d97b00";
		pieces[index].radius = pieces[index]._radius + 10;
		pieces[index].fill = "#ff9000";
		canvas.redraw();
	}).bind("mouseleave touchleave", function () {
		var index = this._index;
		bgPie[index].radius = canvas.height / 3;
		bgPie[index].fill = colorBg[index];
		pieces[index].radius = pieces[index]._radius;
		pieces[index].fill = color[index];
		canvas.redraw();
	});
}

//饼状图旋转动画方法
function rotateScale(end,dom,radius,cb) {
    var ease="ease-out-quart",durTime=500;
    //圆圈动画
    dom.stop().animate({rotation: end,opacity:1,radius:radius}, {
        duration:durTime,
        easing: ease,
        callback: function () {
            if(cb) cb(dom,end,radius);
        }
    });
}

//生成引导线
function labelLine(item){
	var _end = item._end;
	var _start = item._start;
	var rad= Math.PI/180,//计算常量
		sectorR = canvas.height / 3,
		page3W = $(".page3").width();
		page3H = $(".page3").height();
        thisC={x:page3W / 2,y:page3H / 2},
        endX=thisC.x+(sectorR+15)* Math.cos((_end+_start)/2 * rad),
        endY=thisC.y+(sectorR+15)* Math.sin((_end+_start)/2 * rad),
        dom2X=endX<page3W /2?(endX-30):endX,
        dom3X=endX<page3W /2?dom2X:dom2X+30;
        dom4X=endX<page3W /2?dom3X-fst/2:dom3X-fst*3/5,
        dom4Y=endY<page3W /2?endY-40:endY;

    var html = "<hr class='lines line"+i+"_1'>"
	    + "<hr class='line"+i+"_2 smlines'>"
	    + "<div class='bounce"+i+"_3 bounces'></div>"
	    + "<h4 class='title"+i+"_4 animated300 titles delay100'>寿险<br>2143万</h4>";

	$(".page3").append(html);
    $(".page3 .line"+i+"_1").css({
        left: thisC.x,
        top: thisC.y,
        transform:'rotate('+(_end+_start)/2+"deg"+')',
        webkitTransform:'rotate('+(_end+_start)/2+"deg"+')',
        width:(sectorR+15)+"px",
        borderTopColor:color
    });
    $(".page3 .line"+i+"_2").css({
        left: dom2X,
        top: endY,
        borderTopColor:color
    });
    $(".page3 .bounce"+i+"_3").css({
        left:dom3X ,
        top: endY-0.04*fst,
        backgroundColor:color
    });
    $(".page3 .title"+i+"_4").css({
        left:dom4X ,
        top: dom4Y,
        color:color
    })
}

//生成扇形组合
var pieces = [], bgPie = [], whitePie = [], detailPie = [], end, lastEnd;
for (var i = 0; i < data.length; i++) {
	end = (i > 0 ? lastEnd : 0) + 360 / (360 / data[i]) - (i < 1 ? 90 : 0);
	//背景图
	bgPie.push(arc.clone({
		start: (i < 1 ? -90 : lastEnd),
		end: end,
		radius: canvas.height / 3,
		fill: colorBg[i]
		// shadow: "0 0 20px rgba(81,166,255, 0.8)"
	}));
	canvas.addChild(bgPie[i]);
	bgPie[i]._index = i;
	bgPie[i]._start = bgPie[i].start;
	bgPie[i]._end = bgPie[i].end;
	bgPie[i]._radius = bgPie[i].radius;
	//比例
	pieces.push(arc.clone({
		start: (i < 1 ? -90 : lastEnd),
		end: end,
		radius: (canvas.height / 3-canvas.height / 6)*scale[i]+canvas.height / 6,
		fill: color[i]
	}));
	canvas.addChild(pieces[i]);
	//内圆详情
	var circleInner = canvas.display.ellipse({
        x: canvas.width / 2,
		y: canvas.height / 2,
        radius: canvas.height / 7-5,
        stroke: 10+"px #fff",
        fill:"radial-gradient(#fff, #f7fcff, #e0f2ff)"
    });
    canvas.addChild(circleInner);
	//详情文字
	var buttonText = canvas.display.text({
		x: canvas.width / 2,
		y: canvas.height / 2,
		origin: { x: "center", y: "center" },
		align: "center",
		font: "100 14px sans-serif",
		text: "详情",
		fill: "#0084ff"
	});
	canvas.addChild(buttonText);

	lastEnd = end;
	pieces[i]._index = i;
	pieces[i]._start = pieces[i].start;
	pieces[i]._end = pieces[i].end;
	pieces[i]._radius = pieces[i].radius;
	pieces[i]._fill = pieces[i].fill;

	//动画
    var direction=i%2==0?"+":"-";
    rotateScale(direction+360,bgPie[i],bgPie[i]._radius,function(dom,end){dom.rotation=0;dom._rotation=0;});
    rotateScale(direction+360,pieces[i],pieces[i]._radius,function(dom,end){dom.rotation=0;dom._rotation=0;});

	//添加点击事件并重绘
	bindEvent(bgPie[i]);
	bindEvent(pieces[i]);
	//引导线
	labelLine(bgPie[i]);

	circleInner.bind("touchenter",function(){
		window.location.href="https://www.baidu.com/";
	})
	buttonText.bind("touchenter",function(){
		window.location.href="https://www.baidu.com/";
	})

}

setTimeout(function(){
    $(".page3").addClass("fadeIn");
    // $(".page3 .sector_liner .titles").addClass("bounceInRight");
},300);

	</script>


 


本文链接: http://www.dtmao.cc/news_show_1100420.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?