借助 flot 将 HTML 表格中的内容变成图形
来源:互联网 发布:网络推广怎么拿提成 编辑:程序博客网 时间:2024/03/28 18:38
必须引入的包:
<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/jquery.flot.js"></script>
<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/jquery.graphTable-0.2.js"></script>
<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/excanvas.js"></script>
<script type="text/javascript" src="<%=host%>/js/jquery-1.4.3.min.js"></script>
以下是jsp 例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="/ceshi/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/ceshi/js/jquery.flot.js"></script>
<script type="text/javascript" src="/ceshi/js/jquery.graphTable-0.2.js"></script>
<script type="text/javascript" src="/ceshi/js/excanvas.js"></script>
<style>
body {
font-family:Arial;
}
div.flot-graph {
margin:20px 0;
}
p {
padding:4px 2px;
background-color:#eee;
border:1px solid #ccc;
font-family:Courier;
}
table {
text-align:center;
}
table caption {
text-align:left;
font-weight:bold;
margin:20px 0 0 0;
}
</style>
</head>
<body>
<table border="1" cellpadding="2" id="table1" width="500">
<thead>
<caption>Table 1: Graph by columns</caption>
<tr>
<th></th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<th>2</th>
<td>20</td>
<td>40</td>
<td>60</td>
</tr>
<tr>
<th>3</th>
<td>40</td>
<td>80</td>
<td>120</td>
</tr>
</tbody>
</table>
<p>$('#table1').graphTable({series: 'columns'});</p>
<input type="submit" onclick="$('#table1').graphTable({series: 'columns'}); $(this).remove();" value="go" />
<table border="1" cellpadding="2" id="table2" width="500">
<thead>
<caption>Table 2: Graph by rows</caption>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<th>row2</th>
<td>20</td>
<td>40</td>
<td>60</td>
</tr>
<tr>
<th>row3</th>
<td>40</td>
<td>80</td>
<td>120</td>
</tr>
</tbody>
</table>
<p>$('#table2').graphTable({series: 'rows'});</p>
<input type="submit" onclick="$('#table2').graphTable({series: 'rows'}); $(this).remove();" value="go" />
<table border="1" cellpadding="2" id="table3" width="500">
<thead>
<caption>Table 3: Graph by rows, replace currency symbol</caption>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td>$10</td>
<td>$20</td>
<td>$30</td>
</tr>
<tr>
<th>row2</th>
<td>$20</td>
<td>$40</td>
<td>$60</td>
</tr>
<tr>
<th>row3</th>
<td>$40</td>
<td>$80</td>
<td>$120</td>
</tr>
</tbody>
</table>
<p>$('#table3').graphTable({series: 'rows', dataTransform: function(s) { return(s.replace('$','')); } });</p>
<input type="submit" onclick="$('#table3').graphTable({series: 'rows', dataTransform: function(s) { return(s.replace('$','')); } }); $(this).remove();" value="go" />
</body>
</html>
js 下载地址:http://sujian.javaeye.com/admin/blogs/859866
- 借助 flot 将 HTML 表格中的内容变成图形
- WORD表格变成纯HTML
- JS绘图Flot应用-关于图形绘制中的两个异常
- JS绘图Flot应用-关于图形绘制中的两个异常
- FooTable——将 HTML 的表格变成支持各种尺寸
- 获取HTML表格内容
- php用html表格输出数据库中的内容
- 使用JavaScript将表格中的内容获取为二维数组
- 借助CSS滤镜快速将网站页面变成黑白样式
- Python 通过 BeautifulSoup 将 html 中的表格解析成对象
- 将二维Excel表格变成一维
- html表格内容自动换行
- html表格内容居小记
- html 表格内容的滚动
- JAVA 将数据库中的内容转化为HTML
- 将字符串中的HTML标签包含的内容移除
- HTML 中的表格
- html中的细线表格
- 继续上一篇文章的实验,越发的让人搞不明白了
- poj2299 Ultra-QuickSort
- JOB
- CSS小知识
- MyEclipse SSH初体验
- 借助 flot 将 HTML 表格中的内容变成图形
- Janu. 5
- android全格式多媒体播放器(一:ffmpeg移植)
- android全格式多媒体播放器(二:opencore媒体系统解析)
- Win32 下内存泄漏检测的一个方法
- android全格式多媒体播放器(三:基于ffmpeg架构的具体实现)
- 免费虚拟现实软件下载(VEStudio2.0实时阴影Beta版)
- ext
- 我是程序员么?