html中实现饼图
来源:互联网 发布:网络歌手红唇橙子 编辑:程序博客网 时间:2024/04/29 14:33
//饼图显示<p> <canvas id="canvas_circle" width="290" height="200"> </canvas> </p>//绘制<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.1,0.2, 0.3, 0.4]; var color_arr = ["BLUE",'RED','YELLOW','GREEN']; var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"]; drawCircle("canvas_circle", data_arr, color_arr, text_arr); } //页面加载时执行init()函数 window.onload = init; </script>
0 0
- html中实现饼图
- HTML中实现combobox
- 在python中实现数据生成饼图,并且饼图要显示在HTML页面中
- 【html】:html中实现下拉列表
- html 中实现 excel 效果
- javascript在html中实现
- html中lazyload的实现。
- html中实现table跨行跨列
- html中如何实现倒计时
- HTML实现遮罩层的方法 HTML中如何使用遮罩层
- HTML实现遮罩层的方法 HTML中如何使用遮罩层
- HTML实现遮罩层的方法 HTML中如何使用遮罩层
- HTML中树的实现方法
- HTML中实现右键菜单功能
- HTML中实现右键菜单功能
- HTML中实现右键菜单功能
- 在html view中实现圆查询
- html view中实现多图层查询
- Vijos P1493 传纸条(动态规划,双线程DP)
- linux使用--3.git使用
- ecshop二次开发--放大镜
- hdu5452(lca + 树上的操作)
- 下列有关Servlet的生命周期,说法不正确的是?
- html中实现饼图
- C# 关键字extern用法
- Unix网络编程之广播(一)
- Redis 简单启动操作
- hibernate.cfg.xml
- c++ builder 6 fatal:error detected Lme279
- 【稀饭】react native 实战系列教程之项目初始化
- # Ionic+Angularjs快速创建APP应用
- android5.1+获取当前运行的app(Android5.1-也支持)