前端报表技术：使用 JavaScript 生成漂亮图表 
百度 echarts： http://echarts.baidu.com/examples.html 
Funsioncharts : http://www.fusioncharts.com/goodies/fusioncharts-free/ 
Highcharts ： 折线图、 区域图、 柱状图、 饼状图 …

下载地址： http://www.highcharts.com/download

第一步:解压文件,在webapp的js下创建和复制highcharts自己的js文件

如果原项目有jquery-1.8.3.js删除它里面的.

第二步.引入js,复制源码(index.html).exporting.js为打印功能

title ： 报表标题   subtitle: 子标题    xAxis ： 横坐标   yAxis： 纵坐标
第三步.去掉 highcharts.com 的 logo

第四步:定制打印是否显示

highcharts（前端报表生成）的更多相关文章

  1. Highcharts 前端图表插件

    Highcharts 支持将图片下载成各种格式 Highcharts官网:https://www.hcharts.cn/download <div id="container" ...

  2. 设计与开发一款简单易用的Web报表工具（支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  3. 1.前端数据可视化插件:Highcharts、Echarts和D3（区别）

    前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...

  4. Highcharts ajax获取json对象动态生成报表生成 .

    http://blog.csdn.net/wsk7860/article/details/8751061 最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分 ...

  5. Highcharts axja 获取json对象动态生成报表生成

    最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 <scrip ...

  6. 使用phantomjs实现highcharts等报表通过邮件发送（本文仅提供完整解决方案和实现思路，完全照搬不去整理代码无法马上得到效果）

    前不久项目组需要将测试相关的质量数据通过每日自动生成报表展示,并自动通过将报表作为邮件正文内容知会到干系人邮箱.那么问题来了,报表生成了,但是邮件怎么发送,因为highcharts等报表都是通过JS和 ...

  7. 使用phantomjs实现highcharts等报表通过邮件发送

    使用phantomjs实现highcharts等报表通过邮件发送(本文仅提供完整解决方案和实现思路,完全照搬不去整理代码无法马上得到效果)   前不久项目组需要将测试相关的质量数据通过每日自动生成报表 ...

  8. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  9. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

随机推荐

  1. 发送请求时params和data的区别

    在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然. 因为params是添加到url的请求字符串中的,用于get请求. 而data是添加到请求体(body) ...

  2. 详细讲解Android的网络通信（HttpUrlConnection和HttpClient）

    前言,Android的网络通信的方式有两种:使用Socket或者HTTP,今天这一篇我们详细讲解使用HTTP实现的网络通信,HTTP又包括两种方式编程方式: (1)HttpUrlConnection: ...

  3. 树莓派3（Raspbain系统）安装.net环境

    因为公司之前做的网站项目都是基于微软的.net平台,现在需要在树莓派3上测试它是否能负载起正常的访问请求.最开始直接的想到微软3月份刚发布针对于树莓派3的win10系统,其实说是win10,也就是一个 ...

  4. HDU 1069—— Monkey and Banana——————【dp】

    Monkey and Banana Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  5. [转]ASP.NET MVC 5 List Editor with Bootstrap Modals

    本文转自:https://www.codeproject.com/articles/786085/asp-net-mvc-list-editor-with-bootstrap-modals With ...

  6. 3、card 卡片

    1.基本用法的使用 /* --- htm l----*/ <ion-content> <ion-card> <ion-card-header> Header < ...

  7. MySQL判断一个字段不包含中文

    中文=2个字节,英文或数字=1个字节,因此我们用mysql中两个函数比较字节和字符的长度是否相等来判断是否包含中文 select * from user where CHAR_LENGTH(name) ...

  8. Angular6路由复用与延迟加载的冲突解决——看看有备无患

    结论:   结论放最上面,送给匆匆查资料的你: 同时使用延迟加载 + 路由复用,一定不能使用route.routeConfig.path做key去缓存,否则会死得难看. 经实测(我没有完全去解读源代码 ...

  9. Facade模式实现文件上传（Flash+HTML5）

    一.前言 确定了渐进式增强的上传方式,接下来我们需要将上传功能从具体的业务逻辑中剥离出来,作为公共组件供业务层调用.这就要求我们必须对业务层隐藏上传细节,只暴露统一的上传API.这时候大家是不是跟我一 ...

  10. angularjs如何默认选中radio

    (1). 使用 ng-checked 即可.   <label class="radio-inline"> <input name="display&q ...