html一个页面同时加载多个饼图,Html5饼图绘制实现统计图的方法
Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果:
这个图是动态生成的,根据传入的比例参数(数组),来动态绘制饼图。饼图的大小也是根据高度来动态调整的。
全部代码如下:
Canvas测试
//绘制饼图
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;
HTML5绘制饼图演示
浏览器不支持canvas
这个函数可以直接使用,如果想做的更漂亮,可以增加一些额外的美观绘制。
本代码最大的灵活性是将绘制参数与绘制代码分离,饼图大小根据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一个页面同时加载多个饼图,Html5饼图绘制实现统计图的方法相关推荐
- C# aspx页面动态加载ascx用户控件 及 利用反射调用其内方法
//控件代码 public partial class WebUserControl : System.Web.UI.UserControl { public void TestMethod( ...
- 页面的加载与渲染顺序
页面的加载与渲染顺序: 1.一个页面的加载顺序是从上到下顺序加载的,并且加载与渲染同时进行. 2.引用外部js文件时,当在加载过程中遇到标签时,浏览器会向服务器发送一个reques并等待该reques ...
- html 判断页面加载完成,Javascript判断页面是否加载完成
很多时候我们在使用document.getElementById的时候直接在script标签中获取对象,然后使用,此时程序会出现该对象为undefined. var dom=document.getE ...
- 一个大图切成几个小图加载速度更快_CSS精灵图技术(提高页面的加载速度)
未来2088 2019-11-28 18:00:00 哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! ...
- html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题,今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题 今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
- selenium之如何等待页面元素加载完成
webdriver中我们用两种方式进行等待:明确的等待和隐性的等待. 明确的等待 明确的等待是指在代码进行下一步操作之前等待某一个条件的发生.最不好的情况是使用Thread.sleep()去设置一段确 ...
- html页面懒加载灰度图片大小,小程序初级指南--图片及其优化
图片格式 开发中常见的图片格式有 GIF.PNG8.PNG24.JPEG.WEBP. 我们需要根据图片格式的特性和场景需要选取适合的图片格式,而不是设计给什么用什么. PNGPNG 的目的是替代GIF ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
最新文章
- No module named ‘tensorflow.contrib‘
- cos2x = cos^2x-sin^2x的推导
- python-dotenv的使用
- TCP协议经典书籍--TCP/IP详解
- 顶会论文轮番炸场,本周哪些论文最值得读?
- 命名空间“Microsoft.Office”中不存在类型或命名空间名称“Interop”(是否缺少程序集引用?...
- [BZOJ 3894]文理分科(最小割)
- Wayland 源码解析之代码结构
- 决策树信息熵计算_决策树熵|熵计算
- 浙江从小学生就上计算机课,废旧计算机在小学信息技术课中的再利用.doc
- gin框架-1请求参数的示例:
- 百度支持nofollow是百度的进步
- 一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(二)纸娃娃系统
- sas字段有html脚本,sas 实现自动化报表格式之定性变量
- 编写第一个Windows Mobile程序
- 颜色的英语单词,最好是中文和英文的
- 通杀! 熬夜码的 - 八万字 - 让你一文读懂SQL注入漏洞原理及各种场景利用
- ORA-12170:TNS:连接超时错误处理
- android 自定义dns解析器,Android中DNS解析
- iconv的使用方法
热门文章
- Iterator模式
- char * 转LPCTSTR若干方法
- 【转】CT中的“层“与“排“的区别
- 【转】日志记录库(log4cxx)使用指南
- 【转】VNC不同软件之间的联系与区别
- 修改oracle默认日期,Oracle 修改默认日期格式
- 如何用木板做桥_如何辨别使用的公园椅是否需要保养
- python做excel表格代码_python操作excel表格
- linux下java程序实现重启功能
- Spark的Transformations算子(理解+实例)