首先代码并不是原创。
然后,准备弄一个根据数据库创建图表的框架,所以自己现在网上学了一点,先做个饼状图来看看:
<script type="text/javascript" language="javascript">
//设置几个全局变量 计数,概率名数组,概率大小数组,还有分类颜色数组
var DataNum = 0;
var data_arr = new Array();//
var text_arr = new Array();
var color_arr = new Array();
var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400","#FF0000"];//颜色可以多弄几个但是我懒得弄
function run(){ //执行画图方法
drawCircle("canvas_circle");
}
function drawCircle(canvasId){ //画饼状图的方法
data_arr = new Array();
text_arr = new Array();//每次执行都要初始化数据
if(DataNum == 0){
alert("无数据");
return;
}
else{
var j=parseFloat(0);
for(var i = 0; i < DataNum; i++){ //动态添加
data_arr[i] = document.getElementById("data_arr"+i).value; //数据
text_arr[i] = document.getElementById("text_arr"+i).value; //数据名称
j=parseFloat(j)+parseFloat(data_arr[i]); //相加的时候强制转换成浮点型,否知直接字符相加
}
if(j!=1){alert("输入比例不为1,请输入正确的比例");return;}
}
var c = document.getElementById(canvasId); //获取canvas对象
var ctx = c.getContext("2d");
alert("ss");
ctx.clearRect(0,0,500,500);
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 add(){ //添加数据
var new1 = dataInput.insertRow();
var new11 = new1.insertCell();
var new12 = new1.insertCell();
new11.innerHTML ="数据名:<input type='text' size='10'id='text_arr"+DataNum+"'/>";
new12.innerHTML ="百分比:<input type='text' size='10'id='data_arr"+DataNum+"'/>";
DataNum++;
}
//页面加载时执行init()函数
// window.onload = init;
</script>
就这些,先记着,也许以后有用。
下面是HTML5代码
<canvas id="canvas_circle" width="500" height="300">
浏览器不支持canvas
</canvas>
分享到:
相关推荐
通过自定义类,可以实现页面内任意多个饼图 自定义饼图各块的颜色,任意多 在firefox 22,chrome 浏览器测试通过
主要介绍了利用html5 canvas动态画饼状图的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
当我们学习python的时候,总会用到一些常用... windows.title("画饼图") # 设置画布样式 canvas=Canvas(windows,height=500,width=500) # 将画布打包到窗口 canvas.pack() #利用画布的create_arc画饼形,(400,400)
用matlab画饼状图代码 昂永 :onion: 因为如果我必须再次启动MATLAB,我将结束自己:trade_mark: 一个与C ++ 98兼容的可扩展数据可视化框架。 通过相互叠加图像生成层(背景,轴处理程序,图例,绘图仪等)来创建动态...
利用Android 的View和SurfaceView等实现了折线图、柱状图、和饼图的动态的实现效果。给人一种霸气的感觉啦。
HTML5 canvas实现的鼠标拖拉和点击生成甜甜圈饼干动画效果源码.zip
思路是先画第一段弧,然后连线回圆心,关闭路径,注意不需要连线到起始位,用fill()自动闭合到起始点,对照Photoshop里路径转选区的做法可以有助于理解;第二段弧以前一段弧为起始角度,再回圆心,最后关闭路径;第...
试过用d3和canvas分别画饼图,因为本人对canvas比较熟悉和d3还要引入插件,本着轻量化的原则,所以采用canvas封装。 官方饼图两种模式:(1)半径模式(2)面积模式 实现过程 (1)封装的函数如下: function ...
html5个人练习用网页,包含各种基础模块,<audio> 定义音频内容 <video> 定义视频(video 或者 movie) 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件。...
最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式
drawCake(myList,x,y,r)是画饼图 (数组格式的数据源,x坐标,y坐标,半径) drawRadar(myList,x,y,width,height)是画雷达图 (数组格式的数据源,x坐标,y坐标,高度,宽度) drawBrokenLine (myList,x,y,width...
一款网站流量统计中的圆饼图表效果,本效果基于HTML5 canvas技术实现,带动画效果,鼠标放在饼图上,可显示对应的提示信息,饼形图在实际应用中,可结合数据库来生成的动态的数据统计图表,本例中的数据是静态的,...
抛球帆布canvas手写签名svg svg画曲线svg画柱形图svg画折线图svg画饼图svg画雷达图svg画环形图svg绘画十年转盘抽奖埃哈特echarts的调整大小和配置ng注解使用响应式表单时间选择器块加载容器倒计时指令权限指令管道...
简单的 HTML5 画布特征换画笔更改油漆颜色更改轮廓颜色下载图片清晰的图像内置html5 Javascript css3 爱和饼干
厨房弗兰兹 在COVID的一个季节里,我开始学习烹饪的乐趣,并结合了不同的食材以及各种厨具来完善...食材与皮球(百吉饼)碰撞时会自毁 线框 / src /资产 index.js / js Canvas.js Game.js Props.js Paddle.js
官方文档:...(此图片来源于网络,如有侵权,请联系删除! ) 思路是先画第一段弧,然后连线回圆心,关闭路径,注意不需要连线到起始位,用fill()自动闭合到起始点,对照Photosh
动态绘制折线、圆柱、饼状图是一个Android仿天气类app绘制饼状图、折线图、柱状图的实现效果,效果挺不错,例子没有使用第三方类库,全部都是使用Canvas实现。编译版本4.2.2 项目编码UTF-8。源码有比较详细的注释,...
下面我们分七步来完成一个简单的饼形图绘制过程。 1. 重新View的构造方法 public PieView(Context context) { this(context, null); } public PieView(Context context, AttributeSet attrs) { this(context, ...
ECharts-X是 ECharts ...自定义底图这个功能比较简单但是非常实用,能够配置地球的底图纹理图片,使得展现更有质感,以后也会在 ECharts 的 map 中加入。下面截图是将地图换成木星纹理的效果。 标签:ECharts