黑松山资源网 Design By www.paidiu.com
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);
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7
- 雨果唱片-三角琴《俄罗斯民间音乐系列-梁祝(中国名曲)》wav
- 《塞尔达传说:智慧的再现》新实机!无之世界介绍
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 任天堂更新网络投稿规范:打击影响他人游戏体验行为
- 冼佩瑾.2024-女儿Daughter(EP)【杰威尔】【FLAC分轨】
- 黑豹乐队.1993-光芒之神【摇音晨【WAV+CUE】
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售