Pentaho CDE詳細開發使用手冊

主面板：

一、Layout

Layout工具欄：

從左到右：

一、保存當前Layout爲模板。

二、應用模板到當前Layout。

三、添加應用的資源（資源類型有CSS和Javascript，導入內容形式有代碼或具體文件）

四、添加一個Bootstarp Panel

五、添加布局行

六、添加布局列

七、添加Space分隔

八、添加圖片

九、添加html代碼段

十、複製選中的layout控件

十一、刪除選中的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）

 

二、設置數據源

點擊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便可）

四、保存

注：建議保存在public下，home下的文件會有pentaho用戶權限配置影響訪問或者去到pentaho文件夾裏新建一個文件夾用於保存及分類。

五、擴展圖表

引入Echarts實現第三方圖表擴展

引用EChart.Js實現儀表盤示例：

添加echarts基礎支持js

一、添加面板組件：

二、選擇導入文件類型

三、選擇導入的js文件：

四、名稱設置

五、設置數據源

數據格式：

許可證類型	總數
生產許可證	5947
經營許可證	233720

六、去到pentaho文件瀏覽

七、打開data數據源文件

八、選擇數據源

九、點擊複製數據源數據請求地址

十、新建方法函數組件並設置名稱

十、設置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();

十一、預覽

其餘echarts圖表同上方式引用。

六、導出與遷移

一、導出zip：

選擇文件夾，點擊下載

注：pentaho訪問地址儘可能爲ip地址

瀏覽器：使用谷歌、火狐、360系列，cde預覽在IE下存在不兼容問題；下載失敗請檢查是否安裝了不靠譜的安全軟件例如：邁克菲殺毒軟件將文件錯誤攔截及查殺

二、導入zip

選擇文件

注：文件和zip文件中不要使用中文

七、項目引用

新窗口打開CDE文件：

複製展現地址：

修改預覽的頁面的css樣式：文件路徑：pentaho-server\pentaho-solutions\system\pentaho-cdf\js\compressed\lib\Bootstrap\css

轉載請標註出自本博客。

關於須要示例圖表文件的請留言，大數據可視化分析數據庫的數據因爲項目保密不予分享。

參考文檔：https://www.jianshu.com/p/5b383a44bab2