利用html5 canvas动态画饼状图的示例代码


Posted in HTML / CSS onApril 02, 2018

本文介绍了利用html5 canvas动态画饼状图的示例代码,分享给大家,具体如下:

先来看效果图

利用html5 canvas动态画饼状图的示例代码

这里并没引用jquery等第三方库,只是用dom操作和canvas的特性编写的。

canvas画圆大体分为实心圆和空心圆。

根据需求分析知道该圆为实心圆。

1.先用canvas画实心圆

利用html5 canvas动态画饼状图的示例代码

//伪代码
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,开始角,结束角);
ctx.fillStyle = 'green';
ctx.closePath();
ctx.fill();

2.根据不同颜色绘制饼状图

//伪代码
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,绿色开始角,绿色结束角);
ctx.fillStyle = 'green';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,红色开始角,红色结束角);
ctx.fillStyle = 'red';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,黄色开始角,黄色结束角);
ctx.fillStyle = 'yellow';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,紫色开始角,紫色结束角);
ctx.fillStyle = 'purple';
ctx.closePath();
ctx.fill();

3.动态绘制饼状图

动态绘制圆网上普遍推荐三种方法:requestAnimationFrame、setInterval(定时)、还有动态算角度的。

这里我用的是第一种requestAnimationFrame方式。

在编写的过程中发现一个问题,就是动态画圆时并不是以圆心的坐标画的。为了解决这一问题,需要在每次画圆时重新将canvas的画笔的坐标定义为最初圆心的坐标。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #graph {
/*            border: 1px solid black;
            height: 100%;
            width: 100%;
            box-sizing: border-box;*/
        }
    </style>
</head>
<body>
<div id="circle" style="width: 500px;float: left;"></div>
</body>
</html>
<script type="text/javascript">
(function(window,undefined){
    var data = [
        {"product":"产品1","sales":[192.44 ,210.54 ,220.84 ,230.11 ,220.85 ,210.59 ,205.49 ,200.55 ,195.71 ,187.46 ,180.66 ,170.90]},
        {"product":"产品2","sales":[122.41 ,133.16 ,145.65 ,158.00 ,164.84 ,178.62 ,185.70 ,190.13 ,195.53 ,198.88 ,204.32 ,210.91]},
        {"product":"产品3","sales":[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]},
        {"product":"产品4","sales":[165.64 ,170.15 ,175.10 ,185.32 ,190.90 ,190.01 ,187.05 ,183.74 ,177.24 ,181.90 ,179.54 ,175.98]}
    ]
        
    var dom_circle = document.getElementById('circle');
    if(dom_circle != undefined && dom_circle != null)
    {
        var canvas = document.createElement("canvas");
        dom_circle.appendChild(canvas);
        var ctx = canvas.getContext('2d');
        var defaultStyle = function(Dom,canvas){
            if(Dom.clientWidth <= 300)
            {
                canvas.width = 300;
                Dom.style.overflowX = "auto";
            }
            else{
                canvas.width = Dom.clientWidth;
            }
            if(Dom.clientHeight <= 300)
            {
                canvas.height = 300;
                Dom.style.overflowY = "auto";
            }
            else
            {
                canvas.height = Dom.clientHeight;
            }
            //坐标轴区域
            //注意,实际画折线图区域还要比这个略小一点
            return {
                p1:'green',
                p2:'red',
                p3:'yellow',
                p4:'purple',
                x: 0 ,    //坐标轴在canvas上的left坐标
                y: 0 ,    //坐标轴在canvas上的top坐标
                maxX: canvas.width ,   //坐标轴在canvas上的right坐标
                maxY: canvas.height ,   //坐标轴在canvas上的bottom坐标
                r:(canvas.width)/2,  //起点
                ry:(canvas.height)/2,  //起点
                cr: (canvas.width)/4, //半径
                startAngle:-(1/2*Math.PI),               //开始角度
                endAngle:(-(1/2*Math.PI)+2*Math.PI),     //结束角度
                xAngle:1*(Math.PI/180)                   //偏移量
            };
        }
        //画圆
        var tmpAngle = -(1/2*Math.PI);
        var ds = null;
        var sum = data[0]['sales'][0]+data[0]['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3]
        var percent1 = data[0]['sales'][0]/sum * Math.PI * 2 ;
        var percent2 = data[0]['sales'][1]/sum * Math.PI * 2 + percent1;
        var percent3 = data[0]['sales'][2]/sum * Math.PI * 2 + percent2;
        var percent4 = data[0]['sales'][3]/sum * Math.PI * 2 + percent3;
        console.log(percent1);
        console.log(percent2);
        console.log(percent3);
        console.log(percent4);
        var tmpSum = 0;
        var drawCircle = function(){
            
            
            if(tmpAngle >= ds.endAngle)
            {
                return false;
            }
            else if(tmpAngle+ ds.xAngle > ds.endAngle)
            {
                tmpAngle = ds.endAngle;
            }
            else{
                tmpAngle += ds.xAngle;
                tmpSum += ds.xAngle
            }
            // console.log(ds.startAngle+'***'+tmpAngle);
            // console.log(tmpSum);
            // ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
            
            if(tmpSum > percent1 && tmpSum <percent2)
            {
                ctx.beginPath();
                ctx.moveTo(ds.r,ds.ry);
                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle);
            
                ctx.fillStyle = ds.p2;
            }
            else if(tmpSum > percent2 && tmpSum <percent3)
            {
                ctx.beginPath();
                ctx.moveTo(ds.r,ds.ry);
                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle);
                ctx.fillStyle = ds.p3;
            }
            else if(tmpSum > percent3 )
            {
                ctx.beginPath();
                ctx.moveTo(ds.r,ds.ry);
                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle);
                ctx.fillStyle = ds.p4;
            }
            else{
                ctx.beginPath();
                ctx.moveTo(ds.r,ds.ry);
                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle);
                ctx.fillStyle = ds.p1;
            }
            ctx.closePath();
            ctx.fill();
            requestAnimationFrame(drawCircle);
        }
        this.toDraw = function(){
            ds= defaultStyle(dom_circle,canvas);
            // console.log(tmpAngle);
            // console.log(ds.xAngle)
            ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
            drawCircle();
        }
        this.toDraw();
        var self = this;
        window.onresize = function(){
            self.toDraw()
        }
    }

})(window);    
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 #HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 #HTML / CSS
Html5 localStorage入门教程
Apr 26 #HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 #HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 #HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 #HTML / CSS
html5调用摄像头功能的实现代码
May 07 #HTML / CSS
You might like
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python3 xpath和requests应用详解
2020/03/06 Python
vue常用指令代码实例总结
2020/03/16 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英语专业推荐信
2013/11/16 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js