历史博文中有讲解在请求中输出基础图表的方式，见地址：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> " + "<body> " + " <!-- 为ECharts准备一个具备大小（宽高）的Dom --> " + " <div id="main" style=" 600px;height:400px;"></div> " + " <script type="text/javascript"> " + " // 基于准备好的dom，初始化echarts实例 " + " var myChart = echarts.init(document.getElementById('main')); " + " " + " // 指定图表的配置项和数据 " + " var option = { " + " title: { " + " text: 'ECharts 入门示例' " + " }, " + " tooltip: {}, " + " legend: { " + " data:['销量'] " + " }, " + " xAxis: { " + " data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] " + " }, " + " yAxis: {}, " + " series: [{ " + " name: '销量', " + " type: 'bar', " + " data: [5, 20, 36, 10, 10, 20] " + " }] " + " }; " + " " + " // 使用刚指定的配置项和数据显示图表。 " + " myChart.setOption(option); " + " </script> " + "</body> " + "</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> " + "<body> " + " <!-- 为HCharts准备一个具备大小（宽高）的Dom --> " + " <!--<div id="container" style=" 400px;height:400px;"></div>--> " + " <div id="container" style=" 600px;min-400px;height:400px"></div> " + " <script type="text/javascript"> " + " // 基于准备好的dom，初始化echarts实例 " + " var chart = Highcharts.chart('container',{ " + " chart: { " + " type: 'column' " + " }, " + " credits: { " + " enabled:false " + " }, " + " title: { " + " text: 'HCharts 入门示例' " + " }, " + " xAxis: { " + " categories: [ " + " '衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子' " + " ], " + " }, " + " yAxis: { " + " min: 0, " + " title: { " + " text: '销量' " + " } " + " }, " + " series: [{ " + " name: '销量', " + " data: [5, 20, 36, 10, 10, 20] " + " }] " + " }); " + " </script> " + "</body> " + "</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); } }
显示效果如下：
