Highcharts实现图形报表（我主要实现javaweb开发的图形报表）

官网网址：https://www.hcharts.cn/

中文版的（参考起来方便，你懂的。）：http://www.mamicode.com/info-detail-446038.html

网上已经有很多详细的介绍，这里直接说怎么用了就；

必须引入的三个js插件：http://download.csdn.net/detail/biexiansheng/9744829

进入正题：开始介绍如何使用此插件，完成自己的图形报表

 1 <!Doctype html>
 2 <html>
 3 <head>
 4 <title>图形报表的使用</title>
 5 <meta charset="utf-8">
 6 <script type="text/javascript" src="jquery.min.js"></script>
 7 <script type="text/javascript" src="highcharts.js"></script>
 8 <script type="text/javascript" src="jquery.highchartTable.js"></script>
 9 <script type="text/javascript">
10     $(document).ready(function(){
11           $('table.highchart').highchartTable();
12     });
13 </script>
14 </head>
15 <body>
16 <table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:none">
17
18
19 <caption>统计IT从业人员所在的城市</caption>
20   <thead>
21       <tr>
22           <th>城市</th>
23           <th>数量</th>
24           <th>工资</th>
25       </tr>
26    </thead>
27    <tbody>
28       <tr>
29           <td>北京</td>
30           <td>10000</td>
31           <td>99999</td>
32       </tr>
33       <tr>
34           <td>上海</td>
35           <td>20000</td>
36           <td>19999</td>
37       </tr>
38       <tr>
39           <td>深圳</td>
40           <td>30000</td>
41           <td>29999</td>
42       </tr>
43       <tr>
44           <td>广州</td>
45           <td>20000</td>
46           <td>19999</td>
47       </tr>
48       <tr>
49           <td>中关村</td>
50           <td>10000</td>
51           <td>99999</td>
52       </tr>
53   </tbody>
54 </table>
55 </body>
56 </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开发的图形报表）相关推荐

Linux gtk开发教程,使用GTK+和Glade快速开发Linux图形界面
使用GTK+和Glade快速开发Linux图形界面 Glade , GTK , Linux , draft , 图形 * 使用 GTK+ 和 Glade 快速开发 Linux 图形界面 ** GTK+ ...
在JavaWeb中集成BO报表
目录一.获取LogenToken 二.使用LogonToken获取免登报表链接在JavaWeb系统中,可以通过BO的webservice来获取LogenToken,然后使用LogonToken来打 ...
JavaWeb学习总结(一)——JavaWeb开发入门(转载）
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
JavaWeb学习总结(一)：JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
深入体验JavaWeb开发内幕——简述JSP中的自定义标签叫你快速学会
转载自深入体验JavaWeb开发内幕--简述JSP中的自定义标签叫你快速学会自定义标签,顾名思义,就是自己定义的标签.那么我们为什么要自己定义一些标签呢? 我们知道,如果要在JSP中获取数据我 ...
javaweb开发要学习的所有技术和框架总结
javaweb开发要学习的所有技术和框架总结: 前端技术: HTML, CSS, JAVASCRIPT, JQUERY, AJAX HTML "超文本"就是指页面内可以包含图片.链 ...
JavaWeb开发与代码的编写(一)
JavaWeb开发与代码的编写(一) 绝对路径与相对路径在JavaWeb开发中,常使用绝对路径的方式来引入JavaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做 ...
java web 是什么_什么是javaweb开发
Java:简单来说,Java是一门语言,是一门和计算机交流的语言. Web:web(World Wide Web)即全球广域网,它是一种分布式图形信息系统.简单来说就是浏览器上的一个个网站. Jav ...
JavaWeb开发专题(一)-JavaWeb入门
1.JavaEE的概念 Java Enterprice Edtion(Java企业版).JavaEE并不是一个具体的技术.而是由SUN公司提出的一个Java 企业级开发的平台,是一种标准.其中包含13 ...

Highcharts实现图形报表（我主要实现javaweb开发的图形报表）

Highcharts实现图形报表（我主要实现javaweb开发的图形报表）相关推荐

最新文章

热门文章