Pentaho CDE详细开发使用手册


声明:本文转载自https://my.oschina.net/u/2862573/blog/1613534,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

主面板:

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

转载请标注出自本博客。

关于需要示例图表文件的请留言,大数据可视化分析数据库的数据由于项目保密不予分享。

参考文档:https://www.jianshu.com/p/5b383a44bab2

 

本文发表于2018年01月27日 10:32
(c)注:本文转载自https://my.oschina.net/u/2862573/blog/1613534,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 3362 讨论 0 喜欢 1

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1