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">

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏安恒信息

真实案例:数据库审计在入侵行为审计中的作用

做为企业IT应用系统的基础,数据库系统的安全至关重要,它承载了企业运营的关键数据,是企业最核心的IT资产。在数据库安全的日常管理中,内部人员的违规操作和外部黑客...

4565
来自专栏Golang语言社区

Go语言发布1.5版本:彻底告别C代码

在经历了6年6次更新之后,Google的自家编程语言“Go”终于迎来了1.5版本。Google在本次更新中移除了“最后残余的C代码”,因为运行时(runtim...

2939
来自专栏FreeBuf

这款安卓后门GhostCtrl可能是“史上功能最多”的后门

这个世界上从来都不缺Android恶意软件,但我们却很少能够遇到像GhostCtrl后门这种功能如此之多的Android安全威胁。 ? 根据趋势科技的研究人员透...

3197
来自专栏杨建荣的学习笔记

多系统交互中DBA该确认的一些事情(r6笔记第89天)

最近碰到这样一个问题,类似下面的架构形式。 目前应用1是一个另外一个网段的系统,负责一块业务,而应用2是目前我所负责的数据库所在的环境里。 ? 现在因为业务需要...

2806
来自专栏腾讯云服务器团队的专栏

企业用云,如何在私有网络内轻松地玩转云产品

云上产品众多,云产品分布的地域也很多,跨地域不同产品如何以正确的姿势进行使用?本文将从网络的角度给出相关的实践参考。

2562
来自专栏云计算D1net

云应用程序性能管理的四大金刚

应用程序一旦迁移到了云端,管理起来就变得更困难重重了。云应用程序性能管理和性能监控工具则可以帮助识别瓶颈及其他性能度量指标。 优秀的工具有助于确定是否可以将瓶颈...

2744
来自专栏张叔叔讲互联网

QQ如何把你消息传递给好友的?(下篇)

话说你已经成功注册了QQ号码,取名叫“村头小伙”。你的同学小芳“村里那个姑娘”也接受了你的好友申请。之后的日子里面,你们经常通过QQ发送文字和语音,偶尔还会视频...

842
来自专栏java一日一条

大型网站架构体系的演变(下)

在做扩展满足了基本的性能需求后,我们会逐渐关注“可用性”(也就是我们通常听别人吹牛时说的SLA、几个9)。如何保证真正“高可用”,也是个难题。

591
来自专栏网站漏洞修补

公司网站被百度网址安全中心 警告 该怎么取消拦截

今天早晨一上班,习惯性的打开我们公司的网站,发现公司网站竟然跳转到了赌博、彩票网站上去了,我还奇了怪了,于是去百度搜索我们公司网站,发现网站在百度搜索出现:“百...

1821
来自专栏CSDN技术头条

说实话,分布式系统的复杂度远大于它的好处

最近,有一位酷酷的程序员小哥(由网站头像可得)在Hacker Noon网上发表了一篇名为《全面解析分布式系统》的文章。和以往烂大街的分布式教程不太一样,这位小哥...

1112

扫码关注云+社区