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

相关文章

来自专栏移动安全

如何在应用宝发布应用?

1. 进入腾讯开放平台(http://open.qq.com/),注册过后,点击应用接入

1.3K13
来自专栏www.96php.cn

[ecshop模板]如何清除测试数据

Ecshop的后台是很强大的,我们只需要把ecshop的所有测试商品删除就可以了。请看详细教程: 1、删除ecshop测试商品数据 在登入后台,找到商品列表,勾...

3497
来自专栏zhangdd.com

zabbix3.2安装graphtree3.0.4

wget –no-check-certificate  https://raw.githubusercontent.com/OneOaaS/graphtrees...

692
来自专栏ytkah

微信公众平台新增评论管理功能 可显示用户评论

  一大早打开微信公众平台,发现插件那边新增了“评论管理”功能组件,查看了一下,可以显示用户评论。微信公众平台要整合微社区的节奏? ?   通过腾讯微信相关公告...

2773
来自专栏成猿之路

免费下载文库原格式文档![技术福利]

963
来自专栏ytkah

5步教你设置微信自定义菜单【微信公众平台技巧】

  微信自定义菜单是个不错的东西,点击微信公众账号聊天界面下方的菜单就可以弹出预设好的图文消息或网页,省去了有些公众账号提示的微信关键词自动回复如“回复数字16...

2634
来自专栏Java成神之路

Java企业微信开发_07_总结一下企业微信的配置

562
来自专栏歪先生_自留地

Zhē Teng_软件

932
来自专栏知晓程序

用手机也能看小程序后台数据了!微信你很棒棒哦

这个小程序,能让开发者、运营者在手机上就能查看小程序的运营数据,随时随地掌握小程序的市场反应。

501
来自专栏jouypub

Git pull[push] 不用每次输入用户名和密码

网上的很多教程都是使用ssh key来实现免密码操作,其实没那么麻烦,新增一个配置就好了

150

扫码关注云+社区