使用html实现简单的柱状图效果

来源：动视网责编：小采时间：2020-11-27 15:10:55

使用html实现简单的柱状图效果

使用html实现简单的柱状图效果:由于本人写完之后没有进行整理，所以里边代码结构不是很合理，请大家见谅，另外里边的画图的坐标，也是一边画一边调整的，仅供大家参考效果图：<!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

推荐度：

点击下载本文 文档为doc格式

导读使用html实现简单的柱状图效果:由于本人写完之后没有进行整理，所以里边代码结构不是很合理，请大家见谅，另外里边的画图的坐标，也是一边画一边调整的，仅供大家参考效果图：<!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

由于本人写完之后没有进行整理，所以里边代码结构不是很合理，请大家见谅，另外里边的画图的坐标，也是一边画一边调整的，仅供大家参考

效果图：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>绘制柱状图</title>
</head>
<body>
<p style="margin: 0 auto; width:800px; height:400px">
 <canvas id="can1" width="800" height="400">

 </canvas>
 <table border="1" style="width: 800px" id="tab1">
 <caption>会员数的变化</caption>
 <thead>
 <th>公元</th>
 <th>2003年</th>
 <th>2004年</th>
 <th>2005年</th>
 <th>2006年</th>
 <th>2007年</th>
 <th>2008年</th>
 <th>2009年</th>
 </thead>
 <tbody>
 <tr style="text-align: center">
 <th>会员数</th>
 <td>230</td>
 <td>360</td>
 <td>459</td>
 <td>654</td>
 <td>834</td>
 <td>956</td>
 <td>1085</td>
 </tr>
 </tbody>
 </table>
</p>
<script type="text/javascript">
 var can1=document.getElementByIdx_x_x("can1");
 var cxt=can1.getContext("2d");

 var cw=parseInt(can1.width);
 var ch=parseInt(can1.height);

 var basex=0;
 var basey=30;

 var gx=cw*0.8;
 var gy=ch*0.8;

 //第一步:绘制背景
 cxt.fillStyle="#eeeeee";
 cxt.fillRect(basex,basey,gx,gy);

 //第二步:下边我们获取我们表头当中的年份信息
 var tab1=document.getElementByIdx_x_x("tab1");
 var head_cells=tab1.tHead.rows[0].cells;
 var head=[];
 for(var i=1;i
 //获取年份写入到到我们的head数组当中
 head.push(head_cells[i].innerHTML);
 }

 //第三步:取得我们表当中的信息(取得第一个tbody的第一行的所有数据)
 var value_cells=tab1.tBodies[0].rows[0].cells;
 var value=[];
 for(var j=1;j
 var v=value_cells[j].innerHTML;
 //这里要注意进行类型转换，否则后边会出现莫名其妙的错误，像后面的求最大值，会出现错误
 v=parseInt(v);
 value.push(v);
 }

 //第四步:找出我们数据当中的最大的值，以便我们进行坐标的分配
 var max_value=0;

 for(var m=0;m
 if(value[m]>max_value){
 max_value=value[m];
 }
 }

 //第五步:绘制我们的坐标轴
 cxt.beginPath();
 cxt.fillStyle="black";
 cxt.lineWidth=2;
 //移动到我们图中所谓的坐标原点
 cxt.moveTo(0,0);
 //画纵轴
 cxt.lineTo(0,gy+basey);
 //画横轴
 cxt.lineTo(cw,gy+basey);
 cxt.stroke();

 //第六步:开始进行绘制，绘制标题的同时绘制数据

 //首先计算一下我们每个数值所代表的像素长度
 var each_len=gy*0.8/max_value;

 //计算横轴上每个方块所占的长度
 var each_room=gx*0.8/value.length;

 //开始绘制
 for(var h=0;h

 //开始绘制
 //1,绘制年份
 cxt.fillText(head[h],each_room*h+30,gy+basey*1.5);
 //33里边的方块宽度，这是一边画一边调的，所以很乱，大家可以自己调整
 cxt.fillRect(each_room*h+30,gy+basey-value[h]*each_len,33,value[h]*each_len);

 }
</script>
</body>
</html>

html5生成柱状图(条形图)效果的实例代码

使用HTML5 Canvas画柱状图

使用html实现简单的柱状图效果

推荐度：

点击下载本文 文档为doc格式

标签：柱状图简单实现

热门焦点

使用html实现简单的柱状图效果

使用html实现简单的柱状图效果

使用html实现简单的柱状图效果

最新推荐

猜你喜欢

热门推荐