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 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

微信越用越卡,除了清理微信存储空间,还有一点重要步骤要做到

随着手机微信使用频率越来越高,每天微信聊天和刷朋友圈产生大量的文字、图片和视频,都占据越来越多手机的内存。 ? ? 如果不定期清理微信,微信会越用越卡,手机也会...

2279
来自专栏星流全栈

五分钟开发Uber应用主界面

1103
来自专栏轮子工厂

十点总结,为何 Linux 如此深得人心

Linux 过去主要作为服务器运行,但经过几年的发展,其用户界面有了很大的改善。如今,Linux 已经成为美观易用,用户友好的桌面操作系统。在某些方面,Linu...

943
来自专栏我的安全视界观

【一起玩蛇】fortify漏洞的学习途径

静态代码扫描工具(系统)不少,比较出名的可能有fortify、coverity...无论是公司购买或是网上论坛捡到的破解版,相比不少人都已经尝过fortify的...

944
来自专栏云原生架构实践

什么是云原生架构

云计算提供了对无限IT资源的按需付费的商业模式,但从技术架构上看,还需要一个用于构建和运行云原生应用的平台,来实践敏捷开发、DevOps、容器编排,微服务和容器...

3392
来自专栏魏艾斯博客www.vpsss.net

如何添加 wordpress 网站流量统计代码?如何选择?

如何添加 wordpress 网站流量统计代码?现在网站的流量统计一般都采用第三方统计网站代码了,比如国内常见的百度统计,CNZZ,51 啦等等。群友问魏艾斯博...

1732
来自专栏云加头条

黄荣奎:腾讯云微信小程序解决方案

本文介绍小程序在腾讯云上的解决方案,如何快速帮助开发者快速完成开发和上线。

3.6K20
来自专栏Rainbond开源「容器云平台」

【微服务干货系列】微服务性能模式

1695
来自专栏SEO

什么是HTTP / 2,它如何有益于SEO?

2666
来自专栏用户3254834的专栏

干货丨什么是API,SDK和API之间有什么关系呢?

随着软件规模的日益庞大,常常需要把复杂的系统划分成小的组成部分,编程接口的设计十分重要,程序设计的实践中,编程接口的设计首先要使软件系统的职责得到合理划分,良好...

431

扫码关注云+社区