• Oracle BIEE整合百度图形库ECharts

    BIEE虽然提供了丰富的图形组件，但是并不能满足所有用户的需求，尤其是互联网行业的用户。

    这时我们可以考虑引入第三方的图形库，比如本次将要介绍的ECharts (Enterprise Charts 商业产品图表库)。

    ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力

    更多详情请访问：http://echarts.baidu.com/

    由于BIEE的分析提供了叙述视图，该视图支持用户自己编写Html代码，所以我们可以通过叙述视图来将ECharts作为我们的图形展示组件。

    下面我们以BIEE自代的Sample Sales主题为例，介绍具体的实现过程。

    首先创建包含如下字段的分析：

    该分析的逻辑很简单，查看2010年每个月的Revenue及Target Revenue，我们打算以曲线图用来展示，首先我们用BIEE提供来的曲线图来实现

    很容易的完成了任务，不过这时用户又提出了新的需求，能不能点击某个图例，就隐藏对应的曲线呢？比如点击1-Revenue，就隐藏1-Revenue对应的曲线，

    并且现在的还要支持多选，这该怎么办呢？

    答案就是使用ECharts。

    叙述视图简介

    在刚才的分析里创建一个叙述视图，然后编辑它，如下图所示：

    可以看到叙述视图主要由3部分组成，Prefix(前缀)、Narrative(叙述)、Postfix(后缀)另外两个小的设置，分别是换行符和要显示的行数。

    我们来简单的看一下，他们分别是怎么工作的：

    通过上图，大家看明白了么？前缀和后缀只显示一次，叙述则会根据分析的行数循环执行，如果要引用第几列的内容就用@+编号(由左到右，从1开始)；

    如果不想显示全部记录，比如只想显示第一行，那么就可以设置需要显示的行数即可。

    注意：不要在中间的叙述区域定义函数，因为那样最终生成的代码里，你的函数会被重复定义

    下面我们就开始采用ECharts来实现我们的需求了

    1、部署ECharts

    在$FMW/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/目录下创建echarts目录，

    然后从官网下载echarts-1.3.1.zip，解压之后，将

    echarts-1.3.1echarts-1.3.1docexamplewwwjs目录中的echarts.js和esl.js上传到刚在服务器analyticsRes下创建的echarts目录下。

    然后打开console(http://xxxx:7001/console)，更新analyticsRes应用程序

    点击“更新”按钮之后，然后“下一步” 、“完成”即可；最后记得点击左上角的“激活更改”。

    之后在浏览器中输入http://xxxxx:9704/analyticsRes/echarts/esl.js 如是提示下载文件或者直接在页面中显示了esl.js的内容即表示部署成功。

    注：9704是默认端口，请根据自己的情况选择对应的端口

    2、编写叙述视图

    首先在前缀中引入ECharts，代码如下：

    1. <head>  
    2.     <meta charset="utf-8">  
    3.     <title>ECharts</title>  
    4.     <!--Step:1 Import a module loader, such as esl.js or require.js-->  
    5.     <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->  
    6.     <script src="/analyticsRes/echarts/esl.js"></script>  
    7. </head>  
    8.   
    9. <body>  
    10.     <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->  
    11.     <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->  
    12.     <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
    13.       
    14.     <script type="text/javascript">  
    15.     // Step:3 conifg ECharts's path, link to echarts.js from current page.  
    16.     // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
    17.     require.config({  
    18.         paths:{   
    19.             echarts:'/analyticsRes/echarts/echarts',  
    20.             'echarts/chart/bar' : '/analyticsRes/echarts/echarts',  
    21.             'echarts/chart/line': '/analyticsRes/echarts/echarts'  
    22.         }  
    23.     });  
    24.       
    25.     category_list = [] ; //水平标签数组，本例用于存放月份  
    26.     revenue_list = [] ;  // revenue数组，用于存放12个月的revenue  
    27.     target_revenue_list = []; //target revenue数据，用于存放 12个月的target revenue  
    28.       

    可以看到，我们在<head>标签里引入了模块加载器，用来加载ECharts，路径请根据自己的部署情况填写，本例中是：/analyticsRes/echarts/esl.js

    然后我们在require.config里配置了echarts的路径，该路径也请根据自己的部署情况填写。

    最后我们还定义了三个数组，其含义见注释。

    接下来，我们在中间的叙述区域里往三个数组中添加值

    1. category_list.push('@1');  
    2. revenue_list.push(@2);  
    3. target_revenue_list.push(@3);  

    注意：字符串需要用单引号

    最后在后缀区域添加ECharts的图形逻辑

    1. // Step:4 require echarts and use it in the callback.  
    2. // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
    3. require(  
    4.     [  
    5.         'echarts',  
    6.         'echarts/chart/bar',  
    7.         'echarts/chart/line'  
    8.     ],  
    9.     function(ec) {  
    10.         var myChart = ec.init(document.getElementById('main'));  
    11.         var option = {  
    12.             tooltip : {  
    13.                 trigger: 'axis'  
    14.             },  
    15.             legend: {  
    16.                 data:['1- Revenue','5- Target Revenue']  
    17.             },  
    18.             toolbox: {  
    19.                 show : true,  
    20.                 feature : {  
    21.                     mark : true,  
    22.                     dataView : {readOnly: false},  
    23.                     magicType:['line', 'bar'],  
    24.                     restore : true,  
    25.                     saveAsImage : true  
    26.                 }  
    27.             },  
    28.             calculable : true,  
    29.             xAxis : [  
    30.                 {  
    31.                     type : 'category',  
    32.                     data : category_list  
    33.                 }  
    34.             ],  
    35.             yAxis : [  
    36.                 {  
    37.                     type : 'value',  
    38.                     splitArea : {show : true}  
    39.                 }  
    40.             ],  
    41.             series : [  
    42.                 {  
    43.                     name:'1- Revenue',  
    44.                     type:'bar',  
    45.                     data: revenue_list  
    46.                 },  
    47.                 {  
    48.                     name:'5- Target Revenue',  
    49.                     type:'bar',  
    50.                     data: target_revenue_list  
    51.                 }  
    52.             ]  
    53.         };  
    54.           
    55.         myChart.setOption(option);  
    56.     }  
    57. );  
    58. </script>  
    59. /body>  

    最终效果如下图所示：

    当我们点击图例的，对应的条形图就会被隐藏掉，更多ECharts图形交互功能请参阅ECharts官方网站。

    以上就是BIEE整合第三方JS图形库的简单流程，更多的情况需要大家自己去处理，另外，此方法最大的问题就是嵌入的图形和BIEE自身事件的交互问题，

    例如，BIEE原生的曲线图是支持下钻功能的，但是第三方的是不支持的
  • 相关阅读:
    Python-深浅拷贝
    Python-生成式
    Python-手写web应用
    Python-为什么产生了GIL锁？
    Python-文件处理
    Python-线程
    10大网站设计错误 足以毁掉你的网站【转】
    [转]ASP.NET验证发生前无法调用 Page.IsValid。应在 CausesValidation=True 且已启动回发的控件
    jquery操作字符串常用方法总结及工作代码
    C#中的序列化和反序列化是什么、有什么作用、使用方法详解
  • 原文地址：https://www.cnblogs.com/martin-roger/p/5509508.html
Copyright © 2020-2023  润新知