Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
开发 实现 图形 主要 javaweb 报表 HighCharts
2023-09-14 09:08:22 时间
中文版的(参考起来方便,你懂的。):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">
相关文章
- 跨平台应用开发进阶(十五) :uni-app 自定义 showToast并实现下载进度条
- 【Unity开发小技巧】打包IOS版本须知流程(移动)
- Go开发微信小程序SDK推荐
- 驱动开发学习笔记(4-1)–INF文件-1
- UIWebView的使用,简单浏览器的实现详解手机开发
- studio安装插件详解手机开发
- 芯片在Linux系统下开发ARM处理器芯片(linux下开发arm)
- 开发Linux程序,利用Qt软件实现虚拟键盘(linuxqt软键盘)
- 标题:实现Oracle的CDC开发(oraclecdc开发)
- Linux下驱动开发:实现设备与系统的连接(linux下驱动开发)
- 深入Linux嵌入式开发详解PPT(linux嵌入式ppt)
- 实现Linux嵌入式开发认证的必要性(linux嵌入式认证)
- 开发Linux分支开发:实现更多可能(linux的分支)
- 如何利用Linux编译工程:实现高效开发(linux编译工程)
- 界面 Linux C语言实现图形化界面开发指南(linuxc语言图形)
- 科学家开发机器金枪鱼 使用可变刚度尾巴实现更高效的游泳
- YouTube为360度视频开发“热图”工具:75%观众目光关注正前方90度