官网网址：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. Study 7 —— while循环中止语句

    循环的终止语句break #用于完全结束一个循环,跳出循环体执行循环后面的语句continue #只终止本次循环,接着执行后面的循环 1. 打印0-100,截止到第6次 count = 0 while ...

  2. 原生js的ajax请求

    传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次 ...

  3. java中常量文件的配置与读取

    java中常量文件的配置与读取: package com.floor.shop.user.util; import java.io.InputStream; import java.io.InputS ...

  4. 20155332 2016-2017-2 《Java程序设计》第5周学习总结

    学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 1.Java中的所有不正常类都继承于Throwable类.Throwable主要包括两个大类,一个是Er ...

  5. Elastic Job入门（1） - 简介

    介绍 构建一般的业务系统来说,使用Quartz或者Spring Task即可基本满足我们的单体服用应用需要.然而随着线上业务量的不断发展,这两种定时任务已经日渐无法满足我们的需求.一般,使用这两种定时 ...

  6. CentOS6.8安装配置sonarqube6.4

    下载最新版本的sonar(现在改名叫sonarqube) https://www.sonarqube.org/downloads/ 我下载的版本是Sonarqube6.4        1 使用前需要 ...

  7. B - Finding Palindromes （字典树+manacher）

    题目链接:https://cn.vjudge.net/contest/283743#problem/B 题目大意:给你n个字符串,然后问你将这位n个字符串任意两两组合,然后问你这所有的n*n种情况中, ...

  8. 修正iOS从照相机和相册中获取的图片方向

    使用系统相机拍照得到的图片的默认方向有时不是ImageOrientationDown,而是ImageOrientationLeft,在使用的时候会出现图片顺时针偏转90°.使用fixOrientati ...

  9. 20165227《网络对抗技术》Exp0 Kali安装 Week1

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 kali下载:镜像文件通过同学获得 kali具体安装步骤: 打开VMware,点击新建虚拟机,进行创建 创建完成 ...

  10. 子元素应该margin-top为何会影响父元素【转】

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...