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资源( ...
随机推荐
- HttpTool.java 【暂保留】
备注 在 java tool util 工具类 中已存在 HttpTool.java 该类为java源生态的http 请求工具,不依赖第三方jar包 ,即插即用. package kingtool; ...
- jquery扩展代码少的分页bar
直接上图,上代码了,代码量少,不解释那么多了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- C# redis简单的使用
1.项目一:用于在Redis中添加数据 using System; using System.Collections.Generic; using System.Linq; using System. ...
- Postfix 邮件服务 - roundcube webmail
roundcubemail作为web端的邮件客户端.是一个基于浏览器,支持多国语言的IMAP客户端,它的操作界面看起像一个桌面应用程序.它提供一个email客户端应该具备的所有功能,包括MIME支 ...
- 字体QFont
import sys from PyQt5.QtWidgets import QApplication, QWidget,QLabel from PyQt5.QtGui import QFont fr ...
- luogu P4568 [JLOI2011]飞行路线
传送门 看到免费次数\(k\)最多只有10,可以考虑构建\(k+1\)层的分层图,即每一层正常连边,上下两层对应点连边权为0的单向边,最后对所有层里面的\(di_t\)取\(\max\)救星了 #in ...
- Activity生命周期函数、onSaveInstanceState()和onRestoreInstanceState()的介绍
http://www.cnblogs.com/tianzhijiexian/p/3885472.html
- Mybatis进阶学习笔记——动态sql
1.if标签 <select id="queryByNameAndTelephone" parameterType="Customer" resultTy ...
- Shiro后台实现验证权限
今天发现一个问题:使用shiro的时候,虽然隐藏掉了一些菜单,但是当我们通过get请求直接访问菜单的时候还是会访问到,也就是shiro可以在界面实现隐藏一些信息,但是没有真正的根据权限码验证请求,于是 ...
- Struts自定义拦截器&拦截器工作原理
0.拦截器的调用原理: 拦截器是一个继承了序列化接口的普通接口.其工作原理是讲需要被拦截的对象作为参数传到intercept()方法内,在方法内部对此对象进行处理之后再执行原方法.intercept( ...