Html5饼图绘制实现统计图的方法


Posted in HTML / CSS onAugust 05, 2020

Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果:

Html5饼图绘制实现统计图的方法

这个图是动态生成的,根据传入的比例参数(数组),来动态绘制饼图。饼图的大小也是根据<canvas>高度来动态调整的。

全部代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas测试</title>
        <meta charset="UTF-8">
        <script>
            //绘制饼图
            function drawCircle(canvasId, data_arr, color_arr, text_arr)
            {
                var c = document.getElementById(canvasId);
                var ctx = c.getContext("2d");
 
                var radius = c.height / 2 - 20; //半径
                var ox = radius + 20, oy = radius + 20; //圆心
 
                var width = 30, height = 10; //图例宽和高
                var posX = ox * 2 + 20, posY = 30;   //
                var textX = posX + width + 5, textY = posY + 10;
 
                var startAngle = 0; //起始弧度
                var endAngle = 0;   //结束弧度
                for (var i = 0; i < data_arr.length; i++)
                {
                    //绘制饼图
                    endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
                    ctx.fillStyle = color_arr[i];
                    ctx.beginPath();
                    ctx.moveTo(ox, oy); //移动到到圆心
                    ctx.arc(ox, oy, radius, startAngle, endAngle, false);
                    ctx.closePath();
                    ctx.fill();
                    startAngle = endAngle; //设置起始弧度
 
                    //绘制比例图及文字
                    ctx.fillStyle = color_arr[i];
                    ctx.fillRect(posX, posY + 20 * i, width, height);
                    ctx.moveTo(posX, posY + 20 * i);
                    ctx.font = 'bold 12px 微软雅黑';    //斜体 30像素 微软雅黑字体
                    ctx.fillStyle = color_arr[i]; //"#000000";
                    var percent = text_arr[i] + ":" + 100 * data_arr[i] + "%";
                    ctx.fillText(percent, textX, textY + 20 * i);
                }
            }
 
            function init() {
                //绘制饼图
                //比例数据和颜色
                var data_arr = [0.05, 0.25, 0.6, 0.1];
                var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"];
                var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"];
 
                drawCircle("canvas_circle", data_arr, color_arr, text_arr);
            }
 
            //页面加载时执行init()函数
            window.onload = init;
        </script>
    </head>
    <body>
        <h3>HTML5绘制饼图演示</h3>
        <p>
            <canvas id="canvas_circle" width="500" height="300" style="border:2px solid #0026ff;" >
                浏览器不支持canvas
            </canvas>
        </p>
    </body>
</html>

这个函数可以直接使用,如果想做的更漂亮,可以增加一些额外的美观绘制。

本代码最大的灵活性是将绘制参数与绘制代码分离,饼图大小根据Canvas容器高度自动调整。传递参数方式如下:

var data_arr = [0.05, 0.25, 0.6, 0.1]; //比例数据
var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"]; //颜色
var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"]; //文字
//绘制饼图
drawCircle("canvas_circle", data_arr, color_arr, text_arr);

到此这篇关于Html5饼图绘制实现统计图的方法的文章就介绍到这了,更多相关Html5饼图统计图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
You might like
php结合飞信 免费天气预报短信
2009/05/07 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
生产部经理岗位职责
2013/12/16 职场文书
高中政治教学反思
2014/01/18 职场文书
安全标准化汇报材料
2014/02/03 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
一年级学生评语大全
2014/04/21 职场文书
毕业评语大全
2014/05/04 职场文书
团代会宣传工作方案
2014/05/08 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年文秘工作总结
2014/11/25 职场文书
消防演习感想
2015/08/10 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript