首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Highcharts实现图形报表(我主要实现javaweb开发的图形报表)

Highcharts实现图形报表(我主要实现javaweb开发的图形报表)

作者头像
别先生
发布2018-01-02 10:16:23
1.2K0
发布2018-01-02 10:16:23
举报
文章被收录于专栏:别先生别先生

官网网址: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">

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-01-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档