Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
中文版的(参考起来方便,你懂的。):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">
Highcharts实现图形报表(我主要实现javaweb开发的图形报表)的更多相关文章
- JavaWeb学习总结-01 JavaWeb开发入门
一 基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...
- JavaWeb---总结(一)JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
- JavaWeb学习总结(一)——JavaWeb开发入门
http://www.cnblogs.com/xdp-gacl/p/3729033.html 只为成功找方法,不为失败找借口! JavaWeb学习总结(一)--JavaWeb开发入门 一.基本概念 1 ...
- JavaWeb学习总结(一)——JavaWeb开发入门(转载)
转载自http://www.cnblogs.com/xdp-gacl/p/3729033.html感谢孤傲苍狼的分享. 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意 ...
- javaWeb学习总结(1)- JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
- JavaWeb学习总结(一)——JavaWeb开发入门(转)
转载自 http://www.cnblogs.com/xdp-gacl/p/3729033.html 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示In ...
- JavaWeb——JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
- 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器
1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...
- Java Web学习总结(1)——JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
随机推荐
- B树学习总结
1,B树的基本介绍 ①B树,相比于二叉树.红黑树而言,它的特点就是树的高度比其他类型的树要低很多.如何做到低呢?B树中的每个结点的分支数目非常大,即每个结点有很多很多孩子结点.这样,在相同结点数目情况 ...
- JAVA NIO 中的 zerocopy 技术提高IO性能
关于一篇更详细更好的介绍 ZeroCopy技术的文章,可参考:JAVA IO 以及 NIO 理解 这篇文章介绍了 zerocopy技术来提高Linux平台上的IO密集型的JAVA应用程序的性能. ze ...
- MFC中添加了一个dialog,并创建了相应的类,初始化函数没有怎么办?
1.在头文件中添加 virtual BOOL OnInitDialog();2.在对于的CPP文件中添加 BOOL CXXDlg::OnInitDialog() { return TR ...
- Python - Scrapy 框架
Scrapy 是采用Python 开发的一个快速可扩展的抓取WEB 站点内容的爬虫框架.Scrapy,Python开发的一个快速,高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构 ...
- Nginx 虚拟主机示例
Nginx server 模块 server { // 标识虚拟主机开始 listen ; ## // 指定虚拟主机服务器端口 server_name localhost; // 指定 IP地址或者域 ...
- Python 入门基础19 --面向对象、封装
2019.04.17 一.面向对象与面向过程 二.名称空间操作 三.类与对象的概念 四.语法 五.对象查找属性的顺序 2019.04.18 1.类与对象的所有概念:__init__方法 2.类的方法与 ...
- Informatic学习总结_day03
1.update strategy
- Kernel 3.0.8 内存管理函数【转】
转自:http://blog.csdn.net/myarrow/article/details/7208777 1. 内存分配函数 相关代码如下: #define alloc_pages(gfp_ma ...
- Linux系统调用的运行过程【转】
本文转自:http://blog.csdn.net/kernel_learner/article/details/7331505 在Linux中,系统调用是用户空间访问内核的唯一手段,它们是内核唯一的 ...
- linux软链接和硬链接的区别
硬链接:ln 3.txt 4 相当于把源文件复制了一份 软连接:ln -s 3.txt 5 相当于快捷方式 改动源文件4.5同时更新,删除3.txt ,5不存在,4存在的.