js统计图表FineReport多维度坐标轴图

2015-05-12  来源:本站原创  分类:工作日志  人气:274 

js统计图表FineReport多维度坐标轴图

1. 描述

多维度坐标轴图是指在图表中展示多个维度,不仅仅局限于2个维度(展示2个维度只能比较一个维度之间的数据),可以在同一张图表中同时比较2个或2个以上的维度的数据,如下图,可比较华东地区各个产品类型的销量情况,也可以比较饮料产品类型在华东华北的销量情况:

js统计图表FineReport多维度坐标轴图

2. 示例

以FRDemo数据库中的销量表为例,实现上图的效果。

2.1 数据准备

新建一个数据集ds1:SELECT * FROM [销量]

2.2 新建图表

合并一片单元格区域,在该区域中添加图表,图表类型选择柱形图,如下图:

js统计图表FineReport多维度坐标轴图

2.3 图表数据

点击图表属性表-数据,数据来源选择数据集数据,数据集选择ds1,分类轴选择产品类型,系列名选择产品,系列值为销量,如下图:

js统计图表FineReport多维度坐标轴图

2.4 维度添加

效果图中显示了多个分类维度,点击分类轴后面的按钮,添加一个分类轴地区,如下图:

js统计图表FineReport多维度坐标轴图

注:分类轴个数最多只能添加到3个,只限于柱形图和折线图,其他类型图表只能单分类轴,并且多分类轴数据只能支持“规整”的数据,以上图为例,每个地区下的产品类型必须保持完全一致,即华东地区下面有A、B、C三个产品类型,那么华北地区下面也只能有这三种产品类型,不能多也不能少。

2.5 图表样式

多维度坐标轴图设置分类轴样式时,只作用于最上层分类维度,其他分类维度采用默认样式(微软雅黑,9号字体),不可更改,如下图,我们修改分类轴名称的颜色,点击图表属性表-样式>坐标轴>分类轴,修改分类轴的显示样式:

js统计图表FineReport多维度坐标轴图

注:同分类轴设置一样,交互属性-超级链接和条件属性中传递的参数也是作用于最上层分类维度。

2.6 效果查看

将鼠标放置在某一个柱子上会显示所有坐标轴的信息,不同分类维度之间的信息用空格隔开,如上效果。模板效果在线查看请点击DemensionalChart.cpt

已完成模板请参照%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\DemensionalChart.cpt

3. 总结

多维坐标轴图是通过添加多个分类轴来达到多个维度统计的效果,只有柱形图和折线图才能实现多维度效果,并且多维度坐标轴图不支持数据表和坐标轴缩放,分类轴最多只能添加3个,多维度分类轴数据只能是“规整”的数据。

相关文章
  • js统计图表FineReport多维度坐标轴图 2015-05-12

    js统计图表FineReport多维度坐标轴图 1. 描述 多维度坐标轴图是指在图表中展示多个维度,不仅仅局限于2个维度(展示2个维度只能比较一个维度之间的数据),可以在同一张图表中同时比较2个或2个以上的维度的数据,如下图,可比较华东地区各个产品类型的销量情况,也可以比较饮料产品类型在华东华北的销量情况: 2. 示例 以FRDemo数据库中的销量表为例,实现上图的效果. 2.1 数据准备 新建一个数据集ds1:SELECT * FROM [销量] 2.2 新建图表 合并一片单元格区域,在该区域

  • JS点击图片改变图片图径并用正则表达式取图片名的代码 2013-10-21

    JS点击图片改变图片图径并用正则表达式取图片名,非常不错的效果. -------------JS----------------- <script language="javascript" type="text/javascript"> // <!CDATA[ function img1_onclick(id) { var imgName=document.getElementById(id).src.replace(/.*\/([^\/]+)\

  • 用d3.js实现基于SVG的线形图 2015-03-26

    D3全称Data-Driven-Documents,这里说的不是暗黑 III,d3是一款可视化js库,其主要用途是用HTML或者SVG生动地展现数据. 相信网站开发者大都接入过ga来分析各种数据,例如pv图.ga的图都是基于SVG的,下面笔者就用d3来一步一步实现类似ga的pv线形图,并假设读者具有一定的SVG基础(没有?没关系,w3school帮你快速上手). step1:引入d3.js 到github d3下载最新版d3,然后在html代码增加标签 JavaScript 1 2 <scrip

  • 原生js实现移动开发轮播图.相册滑动特效 2014-05-10

    原生JS实现图片自动轮播缓冲切换特效,很实用流畅的图片轮播特效,在较现代的浏览器上展现的圆角效果,兼容差点的是直角效果,全部原生JS实现,还是很不错的值得大家学习并利用,推荐下载. 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSl

  • js 实用的无间断滚动图效果(良好兼容性) 2014-06-10

    网上有不少图片滚动的效果代码,但大多兼容性不好,或者结构混乱,xhtml,css,js 均没有得到良好的优化. 下面介绍一个方法:基本上实现结构跟行为相分离,两者的联系只需要一个 id就可以,使用起来很方便,而且同一个js代码可以实现在本页面多个滚动图效果,之间互不干扰, 1.xhtml <div class="demo" id="demo1"> <table cellpadding="0" cellspacing="

  • js实现简单的购物车有图有代码 2014-07-27

    这篇文章主要介绍了用js实现的简单购物车,配有截图,适合初学者 如图: 全选按钮的实现为: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<

  • javascript实现的柱状统计图表 2014-05-25

    下面是完成后的预览图,可以看到,绘制一个表格,耗时0.005毫秒,也就是200分之一秒.效率我还是比较满意的! 工作需要,用javascript做一个统计图表: 完成后,做个笔记,大家分享一下,互相学习.其中还有点问题,还不是很完善. 其中参考了百度空间,中管理中心,访问统计,的js统计图表.但是应用上还是有差别,因为我做的这个项目中,需要时实的绘制新的统计表格,当有数据变化的时候,就会调用绘制表格的方法.所以要考虑页面性能的问题. 下面是完成后的预览图,可以看到,绘制一个表格,耗时0.005毫

  • javascript实现焦点滚动图效果 具体方法 2013-12-15

    以下JS代码实现了焦点滚动图的效果方法,有需要的朋友可以参考一下 前台代码: <div class="sub_box"> <div id="p-select" class="sub_nav"> <div class="sub_no" id="bd1lfsj"> <ul> <li class="show">1</li>

  • javascript五图轮播切换实用版 2014-04-05

    今天发表一个自己刚学js的练习,javascript五图轮播切换---实用版,这个实力有个缺陷就是没有过渡效果,这个本人也还在研究中,也希望高手可以指点一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • 高效JavaScript单元测试 2013-11-09

    简介: 能在一个浏览器上运行的 JavaScript 并不一定能在其他浏览器上运行.如果没有对代码进行单元测试,那么在决定升级或支持新浏览器的时候,组织就需要花钱测试或重新测试 Web 应用程序.在本文中,了解 JavaScript 单元测试如何帮助您降低测试成本,轻松支持更多浏览器. 一个损坏的 JavaScript 代码示例 Web 应用程序面临的一个最大挑战是支持不同版本的 Web 浏览器.能在 Safari 上运行的 JavaScript 代码不一定能在 Windows® Interne

  • 最新的无权限挂马方式 2014-08-20

    我写这文章并不是教大家怎么跑去挂马啊,挂马是不对的!不过有的时候真的很想做些让人觉得痛快的事情,因为我就碰到很多的管理员,你跟他说服务器有问题吧!他不信,你改些东西警告他吧,他比你还勤快,你一改他马上覆盖回去,让人真的很郁闷. 还有在国外的一些机器上,什么权限都拿到了也不知道他怎么弄的,什么都不让写,好不容易写个文件没一会又改回去了,真的让人很!#$%%#%^#%^,据说就有一种软件能监视重要的文件,一旦发现更改就会给恢复过去,譬如他监视web目录的话我们就不能更改他网站的任何内容了.不过,看了

  • 基于jQuery的ajax功能实现web service的json转化 2014-09-21

    前面文章说过下次会给大家介绍详细的基于web Services的JqueryAjax调用如何把一个datatable得数据转化成JSON数据,然后在客户端再通过json2.js转化成javascript对象. 不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜. 我在做这个东西之前参考了不少文章: http://www.roseindia.net/tutorials/json/parse-message-JSON-JS.shtml http://www.js

  • ckeditor syntaxhighlighter代码高亮插件配置分享 2014-11-01

    现在大家可以不必像我这样为了实现代码高亮的功能,去修改ckeditor编辑器,大家可以去使用百度编辑器(Ueditor)他有代码高亮的功能,还蛮好用的,我的个人网站就是的百度编辑器的.欢迎大家去我的博客看看 最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷

  • 响应式Web图形篇 -- icon fonts 的探析及应用 2014-02-24

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重构灵活性是前端工程师们关心的主题. 当下互联网设备「风起云涌」,显示分辨率「层出不穷」,为 Web 创建者们带来越来越多的难题. 需要为高PPI(aka Retina)显示设备准备@[email protected]@3x的图片素材: 需要针对不同显示屏分辨率来调整优化排版: 需要考虑多个分辨率版本的图片的加载性能

  • web前端开发与iOS终端开发的异同 2014-07-16

    毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点. 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用object-c,前端只能javascript,当然iOS还可以用RubyMotion,前端还能用GWT/CoffieScript,但不是主流,用的人很少,真正用了也会多出很多麻烦.iOS还可以用苹果新出的swift语言,后

  • 上网更快速 IE8正式版新功能全面体验 2014-11-27

    2009年3月20日微软透露的大事件如期与大家见面了,那就是IE8正式版的发布,由于前段时间才看到报道说IE的用户量有所减少,现在就发布了新版本,不由让人想到微软此举是为了拉回失去的用户.因为早期已经使用过Bate版,当时就已经感觉到与IE7相比有明显的变化,所以对于这次的升级小编我也是格外的期待.尤其是看到了新版本的几大新功能,像"搜索"."加速器",这些让许多网友翘首期盼的功能,更是让我迫不及待了.除了功能上的增加,微软对了IE8在浏览时的安全性也没有放松,提供

  • 一个前端工程师眼里的NodeJS 2015-01-15

    JavaScript单线程的误解 在我接触JavaScript(无论浏览器还是NodeJS)的时间里,总是遇到有朋友有多线程的需求.而在NodeJS方面,有朋友甚至直接说到,NodeJS是单线程的,无法很好的利用多核CPU. 诚然,在前端的浏览器中,由于前端的JavaScript与UI占据同一线程,执行JavaScript确实为UI响应造成了一定程度上的麻烦.但是,除非用到超大的循环语句执行JavaScript,或是用阻塞式的Ajax,或是太过频繁的定时器执行外,JavaScript并没有给前端

  • 在团队中用 BIRT 进行报表开发 2012-02-28

    原贴地址:http://www.ibm.com/developerworks/cn/opensource/os-cn-eclipse-birtinteam/index.html 在团队中用 BIRT 进行报表开发 本文主要介绍如何在 BIRT 中创建,使用库( Library )和模板,及如何在报表中使用用户自定义的 JS 文件. 前言 BIRT 是一个基于 Eclipse 的开源报表插件,特别适用于给 J2EE 的 WEB 应用程序创建报表.随着 BIRT 的不断完善,采用 BIRT 进行报表

  • spring mvc中引入xheditor的步骤(一) 2012-11-10

    xheditor下载地址:http://xheditor.com 扔到WebContent/static/js/xheditor目录下,如图: JSP表单中相应的代码如下,仅仅是个textarea,无需做任何更改: <div class="control-group"> <label class="control-label" for="content">内容:</label> <div class=&q

  • JavaScript 开发测试工具概览 2015-01-10

    作者:Nathaniel T. Schutta 原文:http://www.javaworld.com/javaworld/jw-05-2009/jw-05-javascript-tools-overview.html 翻译:Tim JS是可能很现今世界上用的最多,同时也是最被误解编程语言了.虽然JS作为Web开发的工具已经存在了很久,许多开发者仍然不喜欢使用它,因为他们早就受够了浏览器兼容性问题,受够了用alert来作为调试工具.有一阵子,程序员们甚至退出了使用JS开发,而把这个难题丢给界面设