想来很有趣,没想到利用table,div,css,javascript也可以实现一个动态的柱状图表。效果还不错,如下图。基本可以应付简单的需要,更重要的是可以做到柱形图的动态显示 呵呵
用一个table实现柱状图表,table结构如下:
<table>
<caption>统计分析 (2007-02~2008-02)</caption>
<thead></thead>
<tbody>
<tr style="height:300px;">
<td class="chartcaption" style="vertical-align:top;border-right:1px solid #004477;border-bottom:none;">
<p style="padding-top:10px;">消</p><p>费</p><p>金</p><p>额</p><p>(元)</p>
</td>
<td><p><span>12899</span></p><div id="firstcolumn" title="消费金额:12899 元" class="tdbg" style="height:80%;"></div></td>
<td><p><span>9616</span></p><div title="消费金额:9616 元" class="tdbg" style="height:60%;"></div></td>
....
....
....
<td></td>
</tr>
<tr>
<td style="border:none;"></td>
<td style="border:none;">07/02</td>
....
....
....
<td class="chartcaption" style="border:none;">月份</td>
</tr>
</tbody>
</table>
代码比较简单,table也只有2行,x轴上下各是一行。设定一下tr或td的border属性就可以画出x轴,y轴。
柱形图就是在一个td里面有蓝色背景的div~,设定这个div的height属性就可以决定每个柱形图的高度了。
重要的还是要写一些css代码来控制这个table及其div元素的表现形式。
再说说动态实现部分吧,这个很爽啊。
其实要控制一个柱形的高度只要给这个div设定一个id,然后再修改这个div的height属性就行了。
如:
<td><p><span>12899</span></p><div id="firstcolumn" title="消费金额:12899 元" class="tdbg" style="height:80%;"></div></td>
为第一个柱形div标号 id = firstcolumn.
javascript代码修改height属性
<input type="button" value="change" onclick="change()"/>
<script language="javascript" src="include/prototype.js" type="text/javascript"></script>
<script>
var times = 0;
function change(){
add(times);
times = times+5;
}
function add(time){
var firstColumn = $('firstcolumn');
firstColumn.style.height = time+'%';
}
</script>
现在大功告成 点击change按钮就可改变第一个柱形的高度了~
实际应用中可以由ajax技术来控制柱形的变化。例如一个带ajax功能的函数每隔一段时间向后台请求一次,获得最新的数据信息之后再做柱形图高度的同步,还不错吧。
- src.rar (1.8 KB)
- 描述: html,css文件
- 下载次数: 447
分享到:
相关推荐
echarts+vue实现多条统计柱状图表(渐变色柱状图,x、y坐标系修改颜色)项目源码
table转div工具,很棒的工具,直接把table转为div+css
该代码是echart图表和table拼接的demo代码,包括自适应问题。
js实现table分页可以动态生成table
主要介绍了利用 Flask 动态展示 Pyecharts 图表数据的几种方法,需要的朋友可以参考下
ps切出来的table,直接转div,转css超级方便的一款工具。
利用Table的过滤机制实现动态查询和统计.zip源码Delphi项目程序源码下载利用Table的过滤机制实现动态查询和统计.zip源码Delphi项目程序源码下载 1.合个人学习技术做项目参考 2.适合学生做毕业设计参考 3.上线产品...
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
asp.net table实现动态添加行的一个例子
在服务器端生成的table写到页面的一个Div中去:通过存储过程来实现 存储过程
table动态添加行并进行行数据编辑,数据修改等操作,动态操作table
这个工具可以将原来table的html转换为div+css
1、echarts图表的类型是动态的,类型用柱状图展示,合计用折现图展示。2、下面表格对应的月份跟类型是动态的,从后台数据库获取,当查询条件只展示7个月的数据时,下面图表以及表格相应只展示7个月的数据。3、表格头...
使用javascript实现table动态增加删除行列。
Table to Div Tools! Just for you!
讲述div与table在设置边框时的区别
计算机软件-商业源码-243 利用Table的过滤机制实现动态查询和统计.zip
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下