表格渲染：动态渲染、自定义渲染

动态渲染

动态渲染是指我们通过编写脚本来达到表格渲染的目的。当我们选择动态渲染后，表格对话框中的脚本处于可编辑状态，我们可在此进行脚本的编写。我们可通过脚本返回图片，返回的图片有两种途径，一种是用户构建图表，一种是通过 URL 来引用已经存在的图片。

3.11.1 用户构建图表

通过构建图表来进行表格渲染，主要包括三部分，第一部分是定义出图表的格式，第二部分是设定图表的数据源，第三部分是调用 getImage 函数生成图表。

•定义图表格式

1. <font size="3">function createBMark(stack){
   
2. 
   
3. var mark = new RangeBMark();
   
4. 
   
5. mark.addDim("market");
   
6. 
   
7. mark.addMeasure("sum_Sales");
   
8. 
   
9. mark.setOpt(new StackMarkOpt());
   
10. 
    
11. mark.setStack(stack);
    
12. 
    
13. return mark;
    
14. 
    
15. }
    
16. 
    
17. function getBChart(){
    
18. 
    
19. var axisType = CConstants.AXIS_BOTTOM_LEFT;// AXIS_UPPER_RIGHT
    
20. 
    
21. var xscala = new DiscreteScala(new Array("market"));
    
22. 
    
23. var aopt = new AxisOpt();
    
24. 
    
25. aopt.setPType(axisType);
    
26. 
    
27. var lbopt = new AxisLabelOpt();
    
28. 
    
29. lbopt.setPType(CConstants.LABEL_OUTER);
    
30. 
    
31. aopt.setLabelOpt(lbopt);
    
32. 
    
33. xscala.setOpt(aopt);
    
34. 
    
35. var yscala = new ContinuousScala(new Array("sum_Sales"));
    
36. 
    
37. aopt = yscala.getOpt();
    
38. 
    
39. aopt.setPType(axisType);
    
40. 
    
41. var coord = new RectCoord(xscala, yscala);
    
42. 
    
43. var mark = createBMark(false);
    
44. 
    
45. var bchart = new BChart(coord, mark);
    
46. 
    
47. return bchart;
    
48. 
    
49. }
    
50. 
    
51. var bc = getBChart();</font>

复制代码

•设定图表的数据源

所画图表的数据源，在查询中用户可以根据需求使用 SQL 语句制作数据源。

1）数据必须是分组数据，使用 group by 来对数据进行分组。

2）在数据的查询条件中可以添加参数，然后在 cell render 的脚本中给参数传值，从而使查询更加灵活、易用。

param['product'] = cols['Product'];

var data = execute(this,SQL,"Query_cellRender2");

•调用getImage函数生成图表

表格宽度：cell.width

表格高度：cell.height

getImage(bc,data,cell.width,cell.height);

➢举例：

1)准备好两个SQL数据集分别为咖啡销售统计、咖啡销售统计1。

2)在咖啡销售统计1的过滤下添加过滤条件“Market是=?{market}”。

3)在报告中添加表格组件，并绑定咖啡销售统计的Market、Sales。

4)选中Sales列，点击右侧【格式 > 表格渲染】。

5)渲染方式选择“动态渲染”，展示方式选择“原图”，点击脚本，在脚本对话框中编写如下脚本。

脚本内容：

1. <font size="3">function createBMark(stack){
   
2. 
   
3. var mark = new RangeBMark();          //Arange/Point/Line
   
4. 
   
5. mark.addDim("MARKET");
   
6. 
   
7. mark.addMeasure("SALES");
   
8. 
   
9. mark.setOpt(new LineMarkOpt());
   
10. 
    
11. var size = new DefSizeGuide(40);
    
12. 
    
13. mark.setSizeGuide(size);
    
14. 
    
15. mark.setStack(stack);
    
16. 
    
17. return mark;
    
18. 
    
19. }
    
20. 
    
21. function getBChart(){
    
22. 
    
23. var axisType = AXIS_BOTTOM_LEFT;
    
24. 
    
25. var xscala = new DiscreteScala(new Array("MARKET"));
    
26. 
    
27. var aopt = new AxisOpt();
    
28. 
    
29. aopt.setPType(axisType);
    
30. 
    
31. var lbopt = new AxisLabelOpt();
    
32. 
    
33. lbopt.setVisible(false);
    
34. 
    
35. aopt.setLabelOpt(lbopt);
    
36. 
    
37. xscala.setOpt(aopt);
    
38. 
    
39. var yscala = new ContinuousScala(new Array("SALES"));
    
40. 
    
41. aopt = yscala.getOpt();
    
42. 
    
43. aopt.setPType(axisType);
    
44. 
    
45. var coord = new RectCoord(xscala, yscala);
    
46. 
    
47. var mark = createBMark(false);
    
48. 
    
49. var bchart = new BChart(coord, mark);
    
50. 
    
51. var copt = bchart.getChartOpt();
    
52. 
    
53. var cfmt = copt.getFormat();
    
54. 
    
55. cfmt.setBackground(0xECEFF4);
    
56. 
    
57. return bchart;
    
58. 
    
59. }
    
60. 
    
61. var bc = getBChart();
    
62. 
    
63. param['market'] = cols['MARKET'];
    
64. 
    
65. var data = execute(this, SQL, "咖啡销售统计1");
    
66. 
    
67. getImage(bc,data,cell.width,cell.height);</font>

复制代码

效果如图：

➢说明：

如果是在自由表中做动态渲染，需要先在对应的单元格上绑定对应的数据后，再将上文中的示例脚本中数据进行替换，需特别注意将param['market'] = cols['MARKET']替换为param['market'] = explode.left(n)；n表示当前单元格左侧第n个单元格。

3.11.2 通过URL来引用已经存在的图片

在通过 URL 来引用图片时，用户可以引用本地的图片，也可以引用网络上的图片。

引用本地图片，注意需要在路径前边添加file:///。

➢举例：

您可以通过定义url地址直接引用想要使用的图片。

效果如下图：

自定义渲染

在 bihome 中创建 renders.xml 文件后，您可以在表格渲染对话框中的自定义文件夹下看到自定义的表格渲染。

自定义渲染 renders.xml的格式如下：

1. <font size="3"><renders>
   
2. 
   
3. <group name="User Defined">
   
4. 
   
5.        <render name="TestPainter">                                        //自定义渲染的名称
   
6. 
   
7.          <attr name="bgColor" type="21" value="898965"/>                //自定义渲染的设置项及默认值
   
8. 
   
9.        </render>
   
10. 
    
11.        <render name="StartPainter">
    
12. 
    
13.          <attr name="increase" type="10" value="20"/>
    
14. 
    
15.        </render>
    
16. 
    
17. </group>
    
18. 
    
19. </renders></font>

复制代码

render文件是一个配置文件，您可以在文件中使用开发的设置项接口进行相关设置。

您需要编写对应的java文件、调用产品的自定义接口、编译为class文件并放在指定位置以实现自定义渲染，具体方法可以联系定制开发。

➢注意：class文件的路径需要添加到 “tomcat\bin\setclass.bat” 中，放在 “set CLASSPATH=%CLASSPATH%;”后面，重启产品后即可生效。