上一篇介绍了一下Pentaho CDE使用文件的组织和结构这一篇来介绍一下图形之间的联动即点击一个图形的一部分另一个图形显示点击部分的下一级或更详细的内容
效果图如下
一、思路
在第一篇中已经讲了如何生成一个饼形图和一个和一个柱形图(如果不清楚请看这里),这里只需要做的是在点击饼形图中的一部分时改变柱形图数据源的查询参数并重绘图形。思路清楚了之后找出这里实现的关键点如下:
1、点击饼形图时获取点击部分的对应值
2、响应点击事件并把获取的值传递给柱形图数据源
3、重绘图
二、具体实现
如下 第一篇已制作树状图 和 圆饼
现在增加组件 Simple parameter,命名StatYear 默认值为1
接下来对已经制作的圆饼进行联动设置
将这里的clickable设置为true,编辑clickAction 定义事件响应方法
click=function(s){ var category=s.atoms.category; var series=s.atoms.series var value=s.atoms.value Dashboards.fireChange("StatYear",category.toString()) }
获取值的规律 sql第一个字段为那个返回就是啥(及圆饼分类是按照sql语句第一个字段来分类的)
这里的参数s为scene的一个实例,里面包含饼形图被点击部分的数据
s.atoms.category //获取类别 就是以这个字段分类的字段值
s.atoms.series //获取系 就是 取值字段名
s.atoms.value //获取值 这个值越大图形中占的比例越多
Dashboards.fireChange(parameterName,parameterValue)
parameterName:参数名
parameterValue:参数值
下面设置柱形图
选中组件中的BarChar将Listeners设置成侦听参数parameterName侦听其值的改变,将Parameters设置映射成其内部参数orgname并修改数据源如图
sql内容为
SELECT
StatYear,
.......
FROM
AML_ANY_OPINCOME_Y_COM
where StatYear=${StatYear} or 1=${StatYear}
这里用${orgname}将参数orgname的值引入到SQL中
注:设置类型很重要这样SQL数据查询处理的时候增加对应的转换如string会加单引号(')
接下来点击柱状图 完成联动