html5表格设计(Html5饼图绘制实现统计图的方法)
类别:Web前端 浏览量:2219
时间:2021-10-16 00:02:18 html5表格设计
Html5饼图绘制实现统计图的方法Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用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饼图统计图内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5的表单怎么写(HTML5新增form控件和表单属性实例代码详解)
- html5基本结构图解(html5简介及新增功能介绍)
- html5基本结构图(HTML5中的网络存储实现方式)
- Html5新增的标签
- html5自动轮播图代码(HTML5播放实现rtmp流直播)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html5游戏新手引导开发(使用数据结构给女朋友写个Html5走迷宫游戏)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- html5怎么滚动屏幕(HTML5 video进入全屏和退出全屏的实现方法)
- HTMl5 sessionStorage和localStorage
- html5入门布局(吃透移动端 Html5 响应式布局)
- html5应用的几个建议
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5基本代码文字颜色(html5默认气泡修改的代码详解)
- html5 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
热门推荐
- docker默认网络模式(Docker 网络模式及配置方式)
- laravel数据库查询(Laravel获取所有的数据库表及结构的方法)
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- oracle日期函数
- dedecms怎么设置下拉菜单(织梦DedeCMS实现 三级栏目_二级栏目_一级栏目_网站名称 的效果代码)
- dedecms标签怎么用(dedecms三级栏目调用方法)
- echarts组合柱状图(ECharts多图表联动功能的实现过程)
- linux本地文件夹双向同步(linux两台服务器实现自动同步文件)
- php7内核剖析(浅析PHP7的多进程及实例源码)
- phpstudy服务器怎么设置(phpstudy本地环境开启.htaccess伪静态方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9