Pentaho CDE详细开发使用手册
Pentaho CDE详细开发使用手册
主面板：
1、Layout
Layout工具栏：
从左到右：
1、保存当前Layout为模板。
2、应用模板到当前Layout。
3、添加应用的资源（资源类型有CSS和Javascript，导入内容形式有代码或具体文件）
4、添加一个Bootstarp Panel
5、添加布局行
6、添加布局列
7、添加Space分隔
8、添加图片
9、添加html代码段
10、复制选中的layout控件
11、删除选中的layout控件
点击Layout图标，根据布局要求新建布局，如下图：
CDE默认使用分块式布局，采用12列网格化布局，如图col1, col2各占50%宽度，则设置Extra Small Devices均为6。
Layout行列控件基础属性：
Name（控件名） | |
|---|---|
Extra Small Devices（分块大小） | 6 |
Height（高度值） | - |
BackgroundColor（背景颜色） | 默认 |
Corners（样式） | Simple |
Text Align（文本排列方向） | - |
Css Class（设置class） |
2、设置数据源
点击Datasource图标，从左侧选择合适的数据源并填写参数和Query，下图以JDBC连接为例：
CDE Datasource 的JDBC连接参数：
Name（名称） | home1 |
|---|---|
Driver（连接驱动） | oracle.jdbc.driver.OracleDriver |
Password（数据库密码） | 123456 |
User name（数据库用户名） | GXFDA_SUBAREA |
Access Level（级别） | Public |
URL（jdbc连接） | jdbc:oracle:thin:@192.168.0.35:1521/orcl |
Query(查询语句) | SELECT T1."月份",sum(T (...) |
Parameters（参数） | [] |
Columns（列） | [] |
Cache Duration（缓存时间S） | 3600 |
Cache（是否开启缓存） | False |
生产环境SQL连接建议采用JNDI，便于配置。
3、创建组件
点击Components
图标，点击左侧可用组件创建。
下图为一个折线图组件设置：
Line Chart:
设置的属性主要包括
· Name, Title, Width, Height
· Datasource: 使用的数据源，对应Datasource的定义名称
· HtmlObject：显示位置，对应Layout的区域名称
柱状图设置Bar Chart：
参数：
Name（名称） | sethome1 |
|---|---|
Title（标题） | - |
Listeners（监听） | [] |
Parameters（参数） | [] |
Datasource（数据源名称） | home1 |
Height（高度） | 300 |
Width（宽度） | 440 |
HtmlObject（layout页面对象名） | home1 |
Base Axis Title（侧标题） | - |
Clickable（点击响应） | False |
Compatibility Version | 3 |
Crosstab Mode（交叉模式数据的行列翻转） | False |
Legend | - |
Ortho Axis Title（正轴标题） | - |
Series In Rows（是否多行） | False |
Time Series（是否为时间类型） | False |
Orientation（柱状图方向：横竖） | Vertical |
Stacked（是否堆叠） | False |
饼图设置Pie Chart：
具体参数同上：
仪表盘:
稍复杂一些，需要先使用一个Query Componeng输出值到变量，然后仪表盘组件引用该参数，如下图：
Query Component
注意这里应将Query Component的Priority设置为小于CGG Dial Chart的优先级值（默认5，修改为1或2即可）
4、保存
注：建议保存在public下，home下的文件会有pentaho用户权限配置影响访问或者去到pentaho文件夹里新建一个文件夹用于保存及分类。
5、扩展图表
引入Echarts实现第三方图表扩展
引用EChart.Js实现仪表盘示例：
添加echarts基础支持js
1、添加面板组件：
2、选择导入文件类型
3、选择导入的js文件：
4、名称设置
5、设置数据源
数据格式：
许可证类型 | 总数 |
|---|---|
生产许可证 | 5947 |
经营许可证 | 233720 |
6、去到pentaho文件浏览
7、打开data数据源文件
8、选择数据源
9、点击复制数据源数据请求地址
10、新建方法函数组件并设置名称
10、设置js代码：
//获取数据并转换为二维数组封装：
var readJSONFile = function(url){
var jsonData;
$.ajax({
type : 'GET',
url : url,
async : false,
dataType : 'json',
data : null,
success : function(response){
jsonData = response;
}
})
return jsonData;
};
//url_first_bar是访问cda页面给到的请求数据路径（更改为复制的地址）
var url_first_bar = "/pentaho/plugin/cda/api/doQuery?path=/public/GX/home2.cda&dataAccessId=dhome3"
var getFirstBarJSON = readJSONFile(url_first_bar).resultset;
//获取到getFirstBarJSON及所对应的data数据源返回的数据
test=function () {
$(function() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('home3'));
option = {
tooltip : {
formatter: "{a} <br/>(检查覆盖家数/餐饮服务主体数)*100: <br/>("+getFirstBarJSON[0][1]+"/"+getFirstBarJSON[0][2]+")*100 = {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '抽查覆盖率指标:',
type: 'gauge',
detail: {formatter:'{value}%'},
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'red'], [0.8, '#efbe18'], [1, '#22b449']],
width: 20
}
},
data: [{value:getFirstBarJSON[0][0], name: '覆盖率'}]
}
]
};
// （动画）使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
console.log(getFirstBarJSON[0][0]);
var sss=0;
setInterval(function () {
if(sss<21){
option.series[0].data[0].value = ((getFirstBarJSON[0][0]/20)*sss).toFixed(2) - 0;
myChart.setOption(option, true);
sss=sss+1;
}
},200);
});
};
//加载该echarts图表
test();
11、预览
其他echarts图表同上方式引用。
6、导出与迁移
1、导出zip：
选择文件夹，点击下载
注：pentaho访问地址尽量为ip地址
浏览器：使用谷歌、火狐、360系列，cde预览在IE下存在不兼容问题；下载失败请检查是否安装了不靠谱的安全软件例如：迈克菲杀毒软件将文件错误拦截及查杀
2、导入zip
选择文件
注：文件和zip文件中不要使用中文
7、项目引用
新窗口打开CDE文件：
复制展示地址：
修改预览的页面的css样式：文件路径：pentaho-server\pentaho-solutions\system\pentaho-cdf\js\compressed\lib\Bootstrap\css