官网网址：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. div显示提示信息【转】

    div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...

  2. Dubbo的负载均衡

    背景 Dubbo是一个分布式服务框架,能避免单点故障和支持服务的横向扩容.一个服务通常会部署多个实例.如何从多个服务 Provider 组成的集群中挑选出一个进行调用,就涉及到一个负载均衡的策略. 几 ...

  3. Codeforces 950 D. A Leapfrog in the Array

    http://codeforces.com/contest/950/problem/D 前n/2个格子的奇数下标的数没有参与移动 候n/2个格子的奇数下标的数一定是一路移向偶数下标移 所以还原数的初始 ...

  4. 【推荐】Nginx基础知识之————多模块(非覆盖安装、RTMP在线人数实例安装测试)

    说明:已经安装好的nginx,需要添加一个未被编译安装的模块,需要怎么弄呢? 具体:这里以安装第三方nginx-rtmp-module和nginx-accesskey-2.0.3模块为例,nginx的 ...

  5. 神级程序员通过两句话带你完全掌握Python最难知识点——元类！

    千万不要被所谓"元类是99%的python程序员不会用到的特性"这类的说辞吓住.因为 每个中国人,都是天生的元类使用者 学懂元类,你只需要知道两句话: 道生一,一生二,二生三,三生 ...

  6. 浅谈分词算法（4）基于字的分词方法（CRF）

    目录 前言 目录 条件随机场(conditional random field CRF) 核心点 线性链条件随机场 简化形式 CRF分词 CRF VS HMM 代码实现 训练代码 实验结果 参考文献 ...

  7. python安装办法

    先我们来安装python 1.首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后,选择64位下载. 2.下载完成后如下图所示 ...

  8. [Offer收割]编程练习赛9,10

    题目1 : 闰秒 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 计算机系统中使用的UTC时间基于原子钟,这种计时方式同“地球自转一周是24小时”的计时方式有微小的偏差. ...

  9. Git操作学习笔记

    根据廖雪峰老师git教程学习整理 这里需要辨析一下概念.Github是代码托管平台,是协作的工具;而Git是版本控制工具.Git不需要联网,在本机就可以使用 集中式版本控制系统与分布式版本控制系统 S ...

  10. POI导出带格式的Excel模板——（六）

    Jar包