百度开源的ECharts有样式丰富且美观的报表类型可供选用,可以将其集成至EBS请求输出的Html报表中,这其实就是一个生成Html数据的过程。
定义输出类型为HTML的请求我就不在此处赘述。
我们以ECharts中最简单的报表举例http://echarts.baidu.com/examples/editor.html?c=line-simple
其完整的html内容如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <!-- <script src="echarts.min.js"></script> --> <!-- --> <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
使用fnd_file.put_line(fnd_file.output, p_msg)其集成至EBS输出;
此处p_msg即完整的html内容。
此例子只是一个简单的sample。
注意:
1.代码中的js引用源为百度官网的js,如果你所在的环境不允许连接外网,则可以利用内网环境构建自己的js服务。
2.ECharts报表重要的无非就两个方面,设计好样式以及生成相应的option内容对应的json数据。
所以:样式部分交由专人处理,option内容建议不要直接使用数据库生成,而是做成Restful API服务,这样方便以后做成外部报表系统是可以直接使用该服务,plsql中使用utl_http包调用该服务获取相应的option内容
3.html的各种标签建议写成公共包来处理。
4.由于ECharts本身的原因,好像对IE浏览器的兼容不够友好,请使用兼容性较好的浏览器。