HTML5饼状图的画法
新建一个html文件代码如下
<!DOCTYPE HTML>
<html>
<head>
<title>简单化饼图</title>
<meta charset="utf-8"/>
<style>
#pie{
border:1px solid#999;
height:440px;
}
#pie canvas{
margin-left:-17px;
}
</style>
</head>
<script src="script/canvasPie.js"></script>
<body>
<aside id="pie">
<canvas id="canvas_circle" width="300" height="400">
</aside>
</canvas>
</body>
</html>
然后在script文件夹下建一个js文件代码如下
function drawCircle(canvasId,data_arr,color_arr,text_arr){
var c=document.getElementById(canvasId);
var ctx=c.getContext("2d");
var radius=c.width*0.5-20;
var ox=radius+20,oy=radius+20;
var pwidth=30,pheight=10;
var posX=c.width*0.3,posY=c.width;
var textX=posX+pwidth+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,pwidth,pheight);
ctx.moveTo(posX,posY+20*i);
ctx.font='bold 12px 微软雅黑';
ctx.fillStyle=color_arr[i];
var percent=text_arr[i]+":"+100*data_arr[i]+"%";
ctx.fillText(percent,textX,textY+20*i);
}
}
function init(){
var data_arr=[0.35,0.25,0.35,0.05];
var color_arr=["#00FF21","#FFAA00","#00AABB","#FF4400"];
var text_arr=["音频或视频播放器","笔记本电脑","智能手机","电视"];
drawCircle("canvas_circle",data_arr,color_arr,text_arr);
}
window.οnlοad=init;
效果图：
HTML5饼状图的画法相关推荐
- 怎么用html代码画出饼状图,HTML5饼状图代码
HTML5饼状图代码 var data = [ { numb: 4.85, color: '#00ff00', text: 'IE6.0' }, { numb: 4.23, color: '#99ff ...
- echart饼状图没有数据的时候显示暂无数据_Python数据结构可视化 day 5
Python 数据结构可视化 (Day5) 01年度工作总结 有时候画布太大,影响到图表的展示,这个时候输入: "init_opts=opts.InitOpts(width='',heigh ...
- H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
- H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
- 安卓饼状图设置软件_话单及银行卡交易智能分析软件
一.产品概况: 思迈奥SMILE数据智能分析软件是由我司自主设计与研发的一款结合在公安和检察院的侦查业务经验而定制研发的数据智能分析系统,包含于话单.电子银行账单.及其它数据(个人出行数据.社会资源数 ...
- android饼状图简书,Charts-饼状图
上篇文章已经讲述了折线图的用法这边文章主要来谈饼状图. 其实Charts难的部分主要在于配置,所以同样主要说说他的配置. pieGraphView.setExtraOffsets(left: 10, ...
- echart的关系图高亮_echart中饼状图的高亮显示。
1 2 3 4 5 6 7 8 9 10 #main{ 11 width:50vw;height:60vh;margin-left:2vw 12 } 13 14 15 16 17 18 19 20 / ...
- C#应用NPOI实现导出EXcel表格中插入饼状图（可实现动态数据生成）
一.思路: 1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格 二.看代码: #region 生成饼图图例/// <s ...
- mysql 统计做饼状图_PHP+mysql+Highcharts实现饼状统计图
Mysql 首先我们建一张・chart_pie・表作为统计数据. -- edit http://www.lai18.com -- 表的结构 `chart_pie` -- CREATE TABLE IF ...
最新文章
- JS大宗师Douglas新书即将开印，就差一个书名了
- openfire安装配置完全教程
- 转：Jeff Dean的Stanford演讲
- C# 代理访问页面并获取数据
- Android Weekly Notes Issue #218
- ZOJ 4028 15th浙江省省赛E. LIS（神奇贪心）
- AES-128\192\256加密算法及其安全脆弱分析
- PostgreSQL 为什么不要滥用unlogged table hash index
- Adobe（Pr Ae）动态图形模板
- Vuforia入门之简单图片识别案例（一）
- 在树莓派计算模块CM4 eMMC上安装Ubuntu Server 21.10
- .NET NAudio音频录制方法 2021-02-13
- appium滑动操作（向上、向下、向左、向右滑动）
- jwplayer html插件,jw player(网页媒体播放器插件) v2017 最新版
- CANopen总线的协议详解
- 机器学习模型 知乎_算法有没有价值观？知乎内容推荐算法解析
- OTG 线与普通 USB 数据线的区别
- 为什么企业需要低代码平台？（一）
- maven 服务器自动打包,Maven 打包项目到私服 (deploy)的配置方法
- 【Linux基础】Linux软件包管理器yum的使用指南rzsz安装