在OAF页面中集成ECharts以及highcharts用于显示图表
历史博文中有讲解在请求中输出基础图表的方式，见地址：EBS 请求输出Html报表集成Echarts
本文讲述在OAF中集成这两类图表。
集成的基本思路：在OAF页面中加入一个rawText组件，在rawText中加入html代码即可，如此简单。
步骤一：官网下载echarts,highcharts相应的js，放入OA_HTML路径（本例在OA_HTML中加入了文件夹cux）。
步骤二：写OAF页面及CO。
ECharts示例
EChartsPG
<?xml version = '1.0' encoding = 'UTF-8'?>
<page xmlns:jrad="http://xmlns.oracle.com/jrad" xmlns:oa="http://xmlns.oracle.com/oa" xmlns:ui="http://xmlns.oracle.com/uix/ui" version="10.1.3_" xml:lang="en-US" xmlns:user="http://xmlns.oracle.com/jrad/user" xmlns="http://xmlns.oracle.com/jrad" file-version="$Header$">
<content>
<oa:pageLayout id="region1" amDefName="bailian.oracle.apps.cux.test.server.TestAM" controllerClass="bailian.oracle.apps.cux.test.webui.TestPGCO" windowTitle="TEST PAGE" title="TEST PAGE">
<ui:corporateBranding>
<oa:image id="corporateBrandingImage" source="/OA_MEDIA/FNDSSCORP.gif"/>
</ui:corporateBranding>
<ui:contents>
<oa:rawText id="EchartsRowText" text=""/>
</ui:contents>
</oa:pageLayout>
</content>
</page>
对应的CO(本代码中只给出了静态数据示例)：
package cux.oracle.apps.cux.test.webui; import oracle.apps.fnd.common.VersionInfo;
import oracle.apps.fnd.framework.webui.OAControllerImpl;
import oracle.apps.fnd.framework.webui.OAPageContext;
import oracle.apps.fnd.framework.webui.beans.OARawTextBean;
import oracle.apps.fnd.framework.webui.beans.OAWebBean; /**
* Controller for ...
*/
public class TestPGCO extends OAControllerImpl
{
public static final String RCS_ID="$Header$";
public static final boolean RCS_ID_RECORDED =
VersionInfo.recordClassVersion(RCS_ID, "%packagename%"); /**
* Layout and page setup logic for a region.
* @param pageContext the current OA page context
* @param webBean the web bean corresponding to the region
*/
public void processRequest(OAPageContext pageContext, OAWebBean webBean)
{
super.processRequest(pageContext, webBean);
// pageContext.removeJavaScriptLibrary("echarts");
if(pageContext.getJavaScriptLibrary("echarts")==null){
pageContext.putJavaScriptLibrary("echarts","cuxjs/echarts.min.js");
} OARawTextBean rawTextBean =
(OARawTextBean)webBean.findChildRecursive("EchartsRowText"); if (rawTextBean != null) {
String rawTextMessage = null; rawTextMessage = "<html>\n" +
"<body>\n" +
" <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n" +
" <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n" +
" <script type=\"text/javascript\">\n" +
" // 基于准备好的dom，初始化echarts实例\n" +
" var myChart = echarts.init(document.getElementById('main'));\n" +
"\n" +
" // 指定图表的配置项和数据\n" +
" var option = {\n" +
" title: {\n" +
" text: 'ECharts 入门示例'\n" +
" },\n" +
" tooltip: {},\n" +
" legend: {\n" +
" data:['销量']\n" +
" },\n" +
" xAxis: {\n" +
" data: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]\n" +
" },\n" +
" yAxis: {},\n" +
" series: [{\n" +
" name: '销量',\n" +
" type: 'bar',\n" +
" data: [5, 20, 36, 10, 10, 20]\n" +
" }]\n" +
" };\n" +
"\n" +
" // 使用刚指定的配置项和数据显示图表。\n" +
" myChart.setOption(option);\n" +
" </script>\n" +
"</body>\n" +
"</html>";
rawTextBean.setText(rawTextMessage);
} } /**
* Procedure to handle form submissions for form elements in
* a region.
* @param pageContext the current OA page context
* @param webBean the web bean corresponding to the region
*/
public void processFormRequest(OAPageContext pageContext, OAWebBean webBean)
{
super.processFormRequest(pageContext, webBean);
} }
效果如下：
HCharts示例：
<?xml version = '1.0' encoding = 'UTF-8'?>
<page xmlns:jrad="http://xmlns.oracle.com/jrad" xmlns:oa="http://xmlns.oracle.com/oa" xmlns:ui="http://xmlns.oracle.com/uix/ui" version="10.1.3_" xml:lang="en-US" xmlns:user="http://xmlns.oracle.com/jrad/user" xmlns="http://xmlns.oracle.com/jrad" file-version="$Header$">
<content>
<oa:pageLayout id="region1" amDefName="bailian.oracle.apps.cux.test.server.TestAM" controllerClass="bailian.oracle.apps.cux.test.webui.TestHChartsPGCO" windowTitle="TEST PAGE" title="TEST PAGE">
<ui:corporateBranding>
<oa:image id="corporateBrandingImage" source="/OA_MEDIA/FNDSSCORP.gif"/>
</ui:corporateBranding>
<ui:contents>
<oa:rawText id="HChartsRowText" text=""/>
</ui:contents>
</oa:pageLayout>
</content>
</page>
对应的CO(本代码中只给出了静态数据示例)：
package cux.oracle.apps.cux.test.webui; import oracle.apps.fnd.common.VersionInfo;
import oracle.apps.fnd.framework.webui.OAControllerImpl;
import oracle.apps.fnd.framework.webui.OAPageContext;
import oracle.apps.fnd.framework.webui.beans.OARawTextBean;
import oracle.apps.fnd.framework.webui.beans.OAWebBean; /**
* Controller for ...
*/
public class TestHChartsPGCO extends OAControllerImpl
{
public static final String RCS_ID="$Header$";
public static final boolean RCS_ID_RECORDED =
VersionInfo.recordClassVersion(RCS_ID, "%packagename%"); /**
* Layout and page setup logic for a region.
* @param pageContext the current OA page context
* @param webBean the web bean corresponding to the region
*/
public void processRequest(OAPageContext pageContext, OAWebBean webBean)
{
super.processRequest(pageContext, webBean);
// pageContext.removeJavaScriptLibrary("hcharts");
if(pageContext.getJavaScriptLibrary("hcharts")==null){
pageContext.putJavaScriptLibrary("hcharts","cuxjs/highcharts.js");
}; OARawTextBean rawTextBean =
(OARawTextBean)webBean.findChildRecursive("HChartsRowText"); if (rawTextBean != null) {
String rawTextMessage = null; rawTextMessage = "<html>\n" +
"<body>\n" +
" <!-- 为HCharts准备一个具备大小（宽高）的Dom -->\n" +
" <!--<div id=\"container\" style=\"width: 400px;height:400px;\"></div>-->\n" +
" <div id=\"container\" style=\"width: 600px;min-width:400px;height:400px\"></div>\n" +
" <script type=\"text/javascript\">\n" +
" // 基于准备好的dom，初始化echarts实例\n" +
" var chart = Highcharts.chart('container',{\n" +
" chart: {\n" +
" type: 'column'\n" +
" },\n" +
" credits: {\n" +
" enabled:false\n" +
" },\n" +
" title: {\n" +
" text: 'HCharts 入门示例'\n" +
" },\n" +
" xAxis: {\n" +
" categories: [\n" +
" '衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'\n" +
" ],\n" +
" },\n" +
" yAxis: {\n" +
" min: 0,\n" +
" title: {\n" +
" text: '销量'\n" +
" }\n" +
" },\n" +
" series: [{\n" +
" name: '销量',\n" +
" data: [5, 20, 36, 10, 10, 20]\n" +
" }]\n" +
" });\n" +
" </script>\n" +
"</body>\n" +
"</html>";
rawTextBean.setText(rawTextMessage);
} } /**
* Procedure to handle form submissions for form elements in
* a region.
* @param pageContext the current OA page context
* @param webBean the web bean corresponding to the region
*/
public void processFormRequest(OAPageContext pageContext, OAWebBean webBean)
{
super.processFormRequest(pageContext, webBean);
} }
显示效果如下：
在OAF页面中集成ECharts以及highcharts用于显示图表的更多相关文章
- Asp.Net Core Razor页面中使用echarts展示图形
Asp.Net Core Razor页面中使用echarts展示图形 要在Razor页面中使用echarts显示图形,主要问题点在于如何将数据传递给js文件. 1,下载安装echarts库文件 首先引 ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- 润乾报表一个页面中的echarts地图与其他区块的联动
需求概述: DBD样式效果如下图所示,需要点击左侧地图中的地区,右侧的仪表盘,柱线图可以对应显示对应该地区的数据. 实现思路: 分别制作带有地图.仪表盘.柱线图的3张报表:将3张报表放到DBD中设置布 ...
- 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层
系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...
- Selenium WebDriver-判断页面中某一元素是否已经显示，通常用于断言
判断界面中某一元素是否已经呈现,多用于断言,代码如下: #encoding=utf-8 import unittest import time from selenium import webdriv ...
- Django工程中使用echarts怎么循环遍历显示数据
前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...
- struts2标签在jsp页面中构建map集合，循环显示
<s:radio name="gender" list="{'男', '女'}"></s:radio> <s:select nam ...
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- Form_Form与OAF页面互相调用（案例）
2014-12-27 Created By BaoXinjian
随机推荐
- sitecore8.2 如何关闭性能计数器
在Sitecore.config文件或补丁文件修改Counters.Enabled为false值,此key默认为true;然后再修改Sitecore.Tasks.CounterDumpAgent 时间 ...
- Centos7 创建内部的yum源
- 将BUG管理工具（禅道）部署到服务器（测试服务器、云服务器）
禅道是一个开源的项目管理软件,用来记录软件项目的开发过程.bug跟踪以及任务分配,它是基于PHP语言开发的. https://www.zentao.net/download/80111.htm ...
- 聊天斗图神器aidou mac中文版
aidou mac中文版是mac上一款专为斗图设计的聊天斗图神器,让您在聊天的时候不怕没有表情用,炫酷的表情即时更新,让您每时每刻都有新表情用!一键下载的表情包!小编现为您带来aidou斗图神器免费版 ...
- HBuilder 模拟器
模拟器名称 连接默认端口夜神安卓模拟器夜神安卓模拟器 62001逍遥安卓模拟器逍遥安卓模拟器 21503BlueStacks(蓝叠安卓模拟器)BlueStacks(蓝叠安卓模拟器 ...
- Openssl 升级操作
转自:http://www.cnblogs.com/lzcys8868/p/9235538.html 首先我觉得没事就用绿盟扫漏洞的公司,就是闲的蛋疼,傻逼!不少服务器使用nginx,如果openss ...
- 根据文字动态计算Label高度或宽度
//根据已知的label宽度计算文字高度 CGRect rect = [reson boundingRectWithSize:CGSizeMake(label_W, 0) options:NSStri ...
- iOS 与 Swift 方法互相调用
1.OC调用swift 在OC项目中创建一个swift文件时,Xcode会提示 需要创建一个桥接文件,点击确定创建桥接文件,Xcode会自动创建一个桥接文件,名字:工程名-Bridging-Heade ...
- LintCode 1.A+B的问题
LintCode 1.A+B的问题 描述 给出两个整数 a 和 b , 求他们的和. 答案 public class Solution { /** * @param a: An integer * @ ...
- git push时报错:Updates were rejected because the tip of your current branch is behind
出现这样的问题是由于:自己当前版本低于远程仓库版本 有如下几种解决方法: 1.使用强制push的方法: git push -u origin master -f 这样会使远程修改丢失,一般是不可取的, ...