官网网址：https://www.hcharts.cn/

中文版的（参考起来方便，你懂的。）：http://www.mamicode.com/info-detail-446038.html

网上已经有很多详细的介绍，这里直接说怎么用了就；

必须引入的三个js插件：http://download.csdn.net/detail/biexiansheng/9744829

进入正题：开始介绍如何使用此插件，完成自己的图形报表

 <!Doctype html>

 <html>

 <head>

 <title>图形报表的使用</title>

 <meta charset="utf-8">

 <script type="text/javascript" src="jquery.min.js"></script>

 <script type="text/javascript" src="highcharts.js"></script>

 <script type="text/javascript" src="jquery.highchartTable.js"></script>

 <script type="text/javascript">

     $(document).ready(function(){

           $('table.highchart').highchartTable();

     });

 </script>

 </head>

 <body>

 <table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:none">

 <caption>统计IT从业人员所在的城市</caption>

   <thead>

       <tr>

           <th>城市</th>

           <th>数量</th>

           <th>工资</th>

       </tr>

    </thead>

    <tbody>

       <tr>

           <td>北京</td>

           <td>10000</td>

           <td>99999</td>

       </tr>

       <tr>

           <td>上海</td>

           <td>20000</td>

           <td>19999</td>

       </tr>

       <tr>

           <td>深圳</td>

           <td>30000</td>

           <td>29999</td>

       </tr>

       <tr>

           <td>广州</td>

           <td>20000</td>

           <td>19999</td>

       </tr>

       <tr>

           <td>中关村</td>

           <td>10000</td>

           <td>99999</td>

       </tr>

   </tbody>

 </table>

 </body>

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

Highcharts实现图形报表（我主要实现javaweb开发的图形报表）的更多相关文章

  1. JavaWeb学习总结-01 JavaWeb开发入门

    一 基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...

  2. JavaWeb---总结(一)JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  3. JavaWeb学习总结(一)——JavaWeb开发入门

    http://www.cnblogs.com/xdp-gacl/p/3729033.html 只为成功找方法,不为失败找借口! JavaWeb学习总结(一)--JavaWeb开发入门 一.基本概念 1 ...

  4. JavaWeb学习总结(一)——JavaWeb开发入门（转载）

    转载自http://www.cnblogs.com/xdp-gacl/p/3729033.html感谢孤傲苍狼的分享. 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意 ...

  5. javaWeb学习总结（1）- JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  6. JavaWeb学习总结(一)——JavaWeb开发入门(转)

    转载自 http://www.cnblogs.com/xdp-gacl/p/3729033.html 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示In ...

  7. JavaWeb——JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  8. 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器

    1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...

  9. Java Web学习总结（1）——JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

随机推荐

  1. python学习笔记8-异常处理

    一.异常处理 在程序运行过程中,总会遇到各种各样的错误.程序一出错就停止运行了,那我们不能让程序停止运行吧,这时候就需要捕捉异常了,通过捕捉到的异常,我们再去做对应的处理. 下面我们先写一个函数,实现 ...

  2. Syncfusion HTMLUI研究一

    HTMLUI可以加载HTML页面,并且相比WebKit等占用资源特别少 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  3. 关于Mac OS虚拟机下共享文件夹的方法

    1.确保左上角苹果标志的旁边是“Finder”: 2.点击"Finder": 3.选择“偏好设置设置”: 4.然后在“通用”标签下勾选“已连接服务器”: OK,搞定!   完成以上 ...

  4. u-boot移植（十）---代码修改---支持nor flash

    一.问题定位 开发板重启后打印了2个提醒和一个错误,caches的提醒先不看,看看flash和nand下面的提醒,bad CRC,Using default enviroment,我们可以定位Usin ...

  5. luogu 4158 粉刷匠 dp套dp

    dp套dp 每个木板是个递推的dp,外部是个分组背包 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i&l ...

  6. mysql 原理 ~ 二阶段提交协议通说

    一 简介: 今天是第二篇,讲解的是mysql的事务日志 二 具体 1 WAL技术(先写日志,再写磁盘) 2 binlog redolog 二阶段提交协议     目的 保持 redo log和binl ...

  7. DSO windowed optimization 代码 (3)

    4 Schur Complement 部分信息计算 参考<DSO windowed optimization 公式>,Schur Complement 部分指 Hsc(\(H_{X\rho ...

  8. shiro自定义realm支持MD5算法认证(六)

    1.1     散列算法 通常需要对密码 进行散列,常用的有md5.sha, 对md5密码,如果知道散列后的值可以通过穷举算法,得到md5密码对应的明文. 建议对md5进行散列时加salt(盐),进行 ...

  9. 【网络编程4】网络编程基础-ARP响应（ARP欺骗之中间人攻击）

    arp欺骗->arp响应 ARP 缓存中毒(ARP欺骗) arp传送原理在于主机发送信息时将包含目标IP地址的ARP请求广播到网络上的所有主机,并接收返回消息,以此确定目标的物理地址:收到返回消 ...

  10. 【转】mysql8.0 在window环境下的部署与配置

    [转]mysql8.0 在window环境下的部署与配置 今天在阿里云window服务器上配置mysql环境,踩了一些坑,分享出来.需要的朋友可以看看.额,或许有人要吐槽我为什么不在linux上去配置 ...