官网网址：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. java.net.URL 模拟用户登录网页并维持session【转】

    java.net.URL 模拟用户登录网页并维持session 半成品,并非完全有用 import java.io.BufferedReader; import java.io.InputStream ...

  2. Study 3 —— Python运算符

    参考资料:http://www.runoob.com/python/python-operators.html#ysf2 定义变量: a = 10, b = 20 算术运算符: 运算符   描述 实例 ...

  3. cdqz2017-test10-加帕里图书馆（区间DP & 简单容斥）

    给定一个由小写字母组成的字符串,输出有多少重复的回文子序列 #include<cstdio> #include<cstring> using namespace std; #d ...

  4. AWT和Swing的关系

    1.AWT和Swing都是java中的包. 2.AWT(Abstract Window Toolkit):抽象窗口工具包,早期编写图形界面应用程序的包,AWT是通过调用操作系统的native方法实现的 ...

  5. OracleHelper与SqlServerHelper

    1.OracleHelper using System; using System.Data; using System.Configuration; using System.Linq; using ...

  6. Java SE之初探反射机制

    [Keywords]:Java,Hibernate,虚拟机,框架,SQL [Abstract]:   反射的概念:所谓的反射就是java语言在运行时拥有一项自观的能力,反射使您的程序代码能够得到装载到 ...

  7. 第14月第23天 uitextfield文字下移

    1. http://www.jianshu.com/p/641a0cbcabb0

  8. Python字符串解析方法汇总

    Python字符串方法解析 1.capitalize 将首字母大写,其余的变成小写 print('text'.capitalize()) print('tExt'.capitalize()) 结果: ...

  9. Python提示AttributeError 或者DeprecationWarning: This module was deprecated解决方法

    Python提示AttributeError 或者DeprecationWarning: This module was deprecated解决方法 在使用Python的sklearn库时,发现sk ...

  10. Http协议的理解

    作者技术有限,这篇博文都是结合网上的文章和自己的理解而写的,若存在错误,请无私指出,十分感谢! 协议,就是一种标准,即大家都要遵守的标准. 举个简单的例子:在中国,几乎人人都会讲普通话,不同地区的人有 ...