一、工具介绍
Pentaho CDE，CDE即CommunityDashboard Editor，可以理解为看板编辑器，可以与开源报表框架ECharts结合使用，可以制作商务智能仪表盘等报表元素。以下是界面的基本介绍：
从左到右：保存当前Layout为模板；应用模板到当前Layout；添加CSS或JS资源（可自己编写，也可以是现成的文件）；添加一个Bootstarp Panel；添加行；添加列；添加分隔；添加图片；添加HTML；复制选中的layout控件；删除选中的layout控件。
界面按钮
（1）新建CDE仪表板。登录pentaho-server，点击新建→CDE仪表板，如图1所示。
图1 新建CDE仪表板
（2）设置布局。示例：布局添加一行，在右边可以修改名称、高度、背景颜色等属性，如图2所示。
图2 添加行布局
添加一列，同样在右边可以设置各种属性，如图3所示。
图3 添加列布局
添加一个HTML，同样右边是属性板。
在右边属性板的HTML项中输入内容：<h1>我的pentaho CDE示例</h1>，如图4所示。
图4 添加HTML代码
点击Save保存，保存到public文件夹下，如图5所示。
图5 保存文件
保存完毕之后可以点击右上角的“眼睛“进行预览，效果如图6所示。
图6 示例效果
（3）添加CSS文件。将前面的HTML代码内容改为：<div id=’demo’>我的pentaho CDE示例</div>，点击添加资源的按钮，在弹出的对话框中选择CSS资源，如果是添加文件，则选择External File，此处选择Code Snippet自行编写CSS代码，如图7所示。
图7 添加CSS资源
在右边属性板的Resource code属性中输入CSS代码，内容为： #demo{ font-size: 100px; }，如图8所示。
图8 添加CSS代码
保存并预览，如图9所示。
图9 效果图
同理添加Javascript资源，如图10所示。
图10 添加js资源
添加JS代码使其弹出内容为“js示例”的对话框。代码为：$(function(){ alert('js示例') })，如图11所示。
图11 添加js代码
保存并预览，效果如图12所示。
图12 效果图
（4）点击如图13的“浏览文件”，然后在文件夹“public”找到保存的报表，可以选择打开查看或者继续编辑。
图13 浏览文件
二、绑定数据源
点击Datasource图标→Community Data Access→CDA Datasource，如图14所示。
图14 添加数据源
（2）点击图14方框中的“^”，选中文件夹“public”，点击“OK”，在弹出的对话框中输入数据源文件名称“demoDS”，如图15所示。最后点击“OK”。
图15 数据源文件命名
（3）填写数据源的名称以及DataAccess ID，如图16所示。
图16 数据源文件信息
（4）点击图16中方框中的按钮，在弹出的空白框中输入数据源代码：
（一般只需要改动以下的用户名称、密码以及查询语句）
···
<?xml version="1.0" encoding="UTF-8"?>
<CDADescriptor>
<DataSources>
<Connection id="mysql" type="sql.jdbc"><!--id:连接库标识-->
<Driver>com.mysql.jdbc.Driver</Driver> <!--使用的是 mysql 驱动-->
<Pass>cm0103</Pass><!-- mysql 用户密码 -->
<Url>jdbc:mysql://localhost:3306</Url><!-- mysql 地址 -->
<User>root</User><!-- mysql 用户名称 -->
</Connection>
</DataSources>
<DataAccess access="public" connection="mysql" id="get_student" type="sql">
<!--connection:链接的哪个库， id：查询标识，和上面的DataAccessID对应-->
<Name>get_student</Name>
<Cache duration="3600" enabled="true"/>
<Columns/>
<Parameters/>
<Query><![CDATA[SELECT * FROM demo.student]]></Query> <!-- 查询语句 -->
</DataAccess>
</CDADescriptor>
···
以上的id注意一定要和（3）中的DataAccess ID对应，最后点击对话框中的“Save”保存，如图17所示。
图17 数据源代码
（5）按照上文说的方法“浏览文件”，点击public→demoDS.cda→编辑→预览，如图18所示。
图18 编辑数据源文件
（6） 选择“get_student”，就会出现数据，如图19所示。与图20中数据库中的信息一致。点击Query URL，并复制内容，内容为：http://localhost:8080/pentaho/plugin/cda/api/doQuery?path=/public/demoDS.cda&dataAccessId=get_student
图19 数据查询
图20 数据库表内容
三、使用ECharts绑定数据源
（1）上传EChart的js文件，进入“浏览文件”，选中文件夹“public”，上传“echarts.min.js”，此处可能是存在漏洞，上传成功后文件列表里依然不会显示“echarts.min.js”，因此不用理会，可以继续后续操作，如图21所示。
图21 上传EChart的js文件
（2）点击添加资源，如图22所示。
图22 添加js资源
修改属性板的内容，点击Resource File项的“^”，选择（1）中上传的js文件，最后点击“OK”，如图23所示。
图23 加载js文件
（3）点击Settings，将对话框中“RequireJS Support”的勾去掉。（否则加载不了ECharts的js文件）
（4）修改HTML的代码，如图24所示。
代码：
···
<div id='demo'>我的pentaho CDE示例</div>
<div id='container' style='width:100%;height:400px;'></div>···
图24 修改HTML代码
（5）点击添加资源，如图25所示。
图25 添加js资源
在Resource code中输入js代码，如图26所示。此处使用的是ECharts中的仪表盘代码，其他图可以自行在ECharts官网中查看。另外将4.6中步骤（6）复制的地址http://localhost:8080/pentaho/plugin/cda/api/doQuery?path=/public/demoDS.cda&dataAccessId=get_student中的/pentaho/plugin/cda/api/doQuery?path=/public/demoDS.cda&dataAccessId=get_student写到下面代码中url的位置
代码：
···
function getCDAData(url){
var result;
$.ajax({
type:'get',
url:url,
async:false,
success:function(data){
result = data;
}
});
return result;
}
function chartSet(ele,option){
var dom =document.getElementById(ele);
var myChart = echarts.init(dom);
var app = {};
if (option && typeofoption === "object") {
myChart.setOption(option,true);
}
}
// ECharts代码
function getGauge(){
return {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'gpa波动仪表盘',
type: 'gauge',
radius: '90%',
title: {
textStyle: {
color: '#7FFFD4'
}
},
axisLine: { //坐标轴线
lineStyle: { //属性lineStyle控制线条样式
color: [[0.2,'#91c7ae'], [0.5, '#63869e'], [1, '#c23531']]
}
},
detail: {formatter:'{value}%'},
data: [{value: 50, name:'标准差'}]
}
]
}
}
// 获取数据并进行计算，将结果导入到图表
function initChart(){
var url ='/pentaho/plugin/cda/api/doQuery?path=/public/demoDS.cda&dataAccessId=get_student';
var result = getCDAData(url);
var total= 0.0;
var average = 0.0;
var s =0.0;
var rat =0.0;
//以下步骤为计算标准差，作为仪表盘的数值
for(var i=0;i<result.resultset.length; i++){
total= total + result.resultset[i][4];
//result.resultset[1][3]代表数据源文件查询到的信息中第二行的第四列的数值
}
average =total / result.resultset.length;
for(var j=0;j<result.resultset.length; j++){
s = s+ (result.resultset[j][4]-average)*(result.resultset[j][4]-average);
}
s =s/(result.resultset.length-1);
rate =Math.sqrt(s)*100;
var option = getGauge();
option.series[0].data[0].value = rate.toFixed(2);
//将图放在刚刚在HTML中设置的div中
chartSet('container',option);
}
function init(){
initChart();
}
//window.onload = init();
$(function(){
init();
});
图26 添加js资源
（6）保存并预览，如图27所示。最终效果也可以通过“浏览文件”找出对应的报表文件，再打开查看。
图27 示例最终效果
网友评论