Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
2024-08-27 09:15:22
中文版的(参考起来方便,你懂的。):http://www.mamicode.com/info-detail-446038.html
网上已经有很多详细的介绍,这里直接说怎么用了就;
必须引入的三个js插件:http://download.csdn.net/detail/biexiansheng/9744829
进入正题:开始介绍如何使用此插件,完成自己的图形报表
<!Doctype html>
<html>
<head>
<title>图形报表的使用</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.highchartTable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table.highchart').highchartTable();
});
</script>
</head>
<body>
<table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:none"> <caption>统计IT从业人员所在的城市</caption>
<thead>
<tr>
<th>城市</th>
<th>数量</th>
<th>工资</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>10000</td>
<td>99999</td>
</tr>
<tr>
<td>上海</td>
<td>20000</td>
<td>19999</td>
</tr>
<tr>
<td>深圳</td>
<td>30000</td>
<td>29999</td>
</tr>
<tr>
<td>广州</td>
<td>20000</td>
<td>19999</td>
</tr>
<tr>
<td>中关村</td>
<td>10000</td>
<td>99999</td>
</tr>
</tbody>
</table>
</body>
</html>
运行效果如图所示:
上面的程序依次替换成下面的可显示不同的效果:
<table class="highchart" data-graph-container-before="1" data-graph-type="line" style="display:none">
<table class="highchart" data-graph-container-before="1" data-graph-type="area" style="display:none">
<table class="highchart" data-graph-container-before="1" data-graph-type="spline" style="display:none">
<table class="highchart" data-graph-container-before="1" data-graph-type="pie" style="display:none">
最新文章
- setNeedsDisplay,setNeedsLayout
- 读写SD
- C语言操作内存
- iOS中UIMenuController的使用
- C# Common Keyword
- [转载]MongoDB查询优化原则
- .NET垃圾回收与内存泄漏
- Qt 4.7.4 完美动态编译发布动态调试,以及静态编译发布
- Closures in OOC
- 《C++ Primer》之面向对象编程(一)
- Linux常用命令整理
- Cannot complete the install because one or more required items could not be found
- C++实验1
- Maven项目中,系统设置的CLASSPATH环境变量问题
- RCNN论文细节
- Springboot Selenide UI 自动化测试
- JSP页面、包含
- ubuntu1604使用之旅——Qt交叉编译移植
- CSS1 !important
- mybatis 操作数据错误Truncated incorrect DOUBLE value: &#39;&#39;
热门文章
- hashmap和hashtable异同
- 05-迪米特法则(LOD 又名: 最少知道原则)
- Debian/Ubuntu 下网易云音乐无法由图标/列表 打开的解决方案
- JavaSE回顾及巩固的自学之路(四)——————方法和数组,面向对象
- Mongodb 备份 数据导出导入
- MySQL - 日常操作三 mysql慢查询;
- js计算数字长度
- Elastic Job入门(2) - 使用
- 第16月第12天 CABasicAnimation 旋转加速
- CentOS6.8配置SonarQube Scanner配合SonarQube使用