免责声明:此范例仅限于个人自定义开发使用,SAP不保证或担保任何功能的实现。SCN中的资料和文档仅以说明性为目的创作的,其内容并不作为某些功能实现的保证或担保。

虽然BI4.2 的Webi里面提供了地图图表的功能,但是由于某些因素,Webi中内置的地图仅仅包含了很少部分的中国省市。但是在BI4.2中可以创建“自定义元素”来添加自定义的图表。这个例子就是基于百度echarts而实现的地图图表。

运行附件中示例的js文件

附件中的示例的js文件实现了自定义元素的Web服务。这个示例是基于下面的资源开发的。

搭建NodeJS运行环境

  1. 从官网下载NodeJS并安装。在此例子中我的环境是Windows的,所以下载了Windows的版本。此例子使用NodeJS 4.4.1开发。
    安装完成后,在命令行程序里执行下面的命令可以查看NodeJS是否已经安装成功。
    node -v
  2. 安装运行环境的必要模块。
    在这里使用npm工具安装。npm是一个开发包管理工具,NodeJS的模块可以通过这个工具来安装,详细文档请参考npm官网帮助文档
    执行npm安装命令之前,请确认网络代理,如果您的网络又代理的话,执行下面的命令为npm设置代理。
    npm config set proxy “http://your_proxy:port
  3. 接下来在命令行通过运行下面的命令来安装此示例的必要模块。在命令行进入到NodeJS的安装目录安装,并使用administrator用户。
    npm install express
    npm install phantom-proxy
    npm install xmldoc
    npm install body-parser
  4. 我们还需要安装pm2,这是一个管理NodeJS实例的工具。方便我们启动/停止 NodeJS实例。
    npm install pm2 –g
    安装完成后可以通过下面的命令验证pm2是否安装成功。
    pm2 -v

启动附件的JS文件

请下载附件后,将附件中的txt文件的后缀名改成js。在这个js文件中包含基于百度echart开发的地图图表,是一个自定义web服务。

在运行这个js实例之前,请先指定web服务监听的端口号。通过修改下面的代码来指定端口号。把port改成你想要的端口号。

// Set the port number

app.listen(port);


按照下面的步骤通过pm2启动js实例。

  1. 打开命令行程序,并进入到NodeJS安装目录。
  2. 执行下面的命令。
    pm2 strat app.js

如果启动成功,你将会看到下面这样的结果。

/wp-content/uploads/2016/04/pm2_920032.png

创建带有自定义元素的Webi报表

  1. 进入 CMC=> 应用程序=> Web Intelligence, 双击Web Intelligence 进入属性界面。
  2. 选择 “自定义元素”,点击“添加服务”。
  3. 在添加服务窗口指定服务名称和服务URL。服务URL就是我们Web服务的URL(http://servername:port)。
    由于我是运行在server本地,指定的端口号是3001,所以这里面就填上http://localhost:3001.
    添加完成后点击测试,如果测试成功则说明配置完成。“媒体类型”使用默认就可以,点击“确定”。
    然后在“自定义元素”勾选刚刚添加的服务,点击“保存并关闭”。此时就可以使用自定义元素了。
  4. 经过以上配置你就可以在Webi中使用自定义元素了,如下图。
    默认情况下,echart使用的数据中的地区维度里面的值必须是echart能识别标准值。如果想使用其他值作为地区的值。可以参考echart文档设置地区映射。

/wp-content/uploads/2016/04/geomap_920054.png

扩展示例的js文件,添加其他echart图表

开发NodeJS程序可以使用nodeclipse开发框架。Nodeclipse提供了基于Eclipse的开发IDE(Enide)。关于如何配置Nodeclipse开发环境可以参考网络上的一些资料,也可以参考Nodeclipse的官方文档。

接下来我简单说一下代码扩展方法。

对于echart来说,所有chart的生成都是把chart的属性变量 “option”传给一个echart API生成的chart的实例。这样对于我们扩展其他图表类型就提供了很大的方便。我们只需要在代码中生成对应图表的option,就可以得到想要的图表。

按照上面的思路,我们需要做下面的工作来实现扩展。

  1. 初始化一个“Visualization”,并把他加入到“factory”的数组中。
    这样是为了Webi可以读取到这个图表类型。
  2. 生成此图表所需的option变量。
    将生成的变量传给HTML文本,并生成完整HTML。


这样我们就实现了其他echart的集成。后续code大致如下面的样子。

//New Chart

// Initialize viz<ID> object

var viz<ID> = new Visualization(params)

factory.visualizations.push(viz<ID>);

// HTML generate function

viz<ID>.generate =function(req){

//initialize option structure for echart

  var option = {<…>}

  var w = req.body.width ? req.body.width : 1100;

  var h = req.body.height ? req.body.height : 900;

//start to generate option.

//end  to genertate option

  var html='<!DOCTYPE html>’+

‘<html>’+

‘<head>’+

‘    <meta charset=”utf-8″>’+

‘    <title>ECharts</title>’+

‘    <script src=”http://echarts.baidu.com/dist/echarts.min.js“></script>’+

‘    <script src=”http://echarts.baidu.com/asset/map/js/china.js“></script>’+

‘</head>’+

‘<body>’+

‘    <div id=”main” style=”width: ‘+w+’px;’+

‘height:’+h+’px;’+

‘”></div>’+

‘    <script type=”text/javascript”>’+

‘        var myChart = echarts.init(document.getElementById(\’main\’));’+

‘option=’+JSON.stringify(option)+’;’+

‘        myChart.setOption(option);’+

‘    </script>’+

‘</body>’+

‘</html>’;

return html;

};

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply