SpagoBI新需求改造：实现tableCharts报表

版本：spagobi 4.2

 

要求：1）table用extjs，能分页，能过滤；

           2）单击table的一行，能和chart进行联动，chart用highchart；

 

  知识储备：

           动态创建column：

         var GroupRecord = Ext.data.Record.create([

                                     {name: 'title', type: 'string'},

                                     {name: 'icon', type: 'string'}, 

                                     {name: 'samples', type: 'string'}

                                 ]);    

        

 

 

 

 

一、可能用到的页面元素

        页面：1）WEB-INF/jsp/commons/importSbiJS.jspf  （里面引入了很多需要的js文件）

                   2）/WEB-INF/jsp/analiticalmodel/documentbrowser/userDocumentBrowser.jsp

                   2）/WEB-INF/jsp/engines/chart/highchart.jsp  （chart用到该页面渲染）；

                 

 

         js文件：/web-content/js/src/ext/sbi/engines/chart/HighchartsPanel.js 

                      /web-content/js/src/ext/sbi/execution/DocumentExecutionPage.js

 

 

 

 

           从后台读取highchart的步骤：

 

 

 

1）从sbi_binary_contents读取studio传递进来的配置模板

SpagoBIChartInternalEngine的getTemplate(String documentId)方法中查询  //

该方法做两件事：

1.1）查询模板。

ObjTemplate template = DAOFactory.getObjTemplateDAO().getBIObjectActiveTemplate(Integer.valueOf(documentId));

 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!-- see highcharts' documentation to view all possible options (http://www.highcharts.com/ref) -->

<HIGHCHART width="100%" height="100%" >
	<CHART type="waterfall" zoomType='xy'/>
	<TITLE text="$F{ANAG} Trend" color="#325072"/>
	<SUBTITLE text= "Year: 2012 - State: $P{state}" />
	
	<COLORS_LIST>
        <COLORS color="#123a9c" upColor="#90ee90" downColor="#b30f00" sumColor="#66b266 "/>
    </COLORS_LIST>
	
	<LEGEND enabled='false'/>
	<X_AXIS alias='name' type='category' > 
		<TITLE text= "" />
	</X_AXIS>
	
	<Y_AXIS_LIST>
		<Y_AXIS min="0" lineWidth="1" alias='VALUE' >
			<TITLE text= "" />
			<!--LABELS  formatter='userFunction(this.value + " $")' /-->
		</Y_AXIS>
	</Y_AXIS_LIST> 

	<PLOT_OPTIONS>	
		<WATERFALL enableMouseTracking='true'>
		   <DATA_LABELS enabled='true' formatter='numberFormat(0,",",".")' inside='false'>
				<STYLE color='black' fontSize='12px'/>
		   </DATA_LABELS>
		</WATERFALL>
	 </PLOT_OPTIONS>
	  
	<SERIES_LIST>
		<SERIES alias="NAME,VALUE" isIntSumAlias="ISINTSUM" isSumAlias="ISSUM"  colorAlias="color"  />
	</SERIES_LIST>
	<!-- tooltip object properties 

	<TOOLTIP enabled='true'  shadow='true' formatter='x_y'>
		<STYLE color='#26783f' fontSize='12px' padding='2px' />
	</TOOLTIP>  -->
	<!--TOOLTIP  backgroundColor='#FCFFC5'  enabled='true' shadow='true' formatter='userFunction(this.point.x + "&lt;/b&gt; : &lt;b&gt;"+ this.point.y +"&lt;/b&gt;M &lt;/b&gt; eur")'  >
		<STYLE  color='#4572A7' fontSize='12px' padding='2px' />
	</TOOLTIP-->
	<!--TOOLTIP  backgroundColor='#FCFFC5'  enabled='true' shadow='true'  text=' {CATEGORY} : {SERIE}'>
		<STYLE  color='#4572A7' fontSize='12px' padding='2px' />
	</TOOLTIP-->
	<TOOLTIP   backgroundColor='#FCFFC5'  enabled='true' shadow='true' pointFormat=":{point.y}&lt;/b&gt;&lt;br/&gt;" valueDecimals="0"  valuePrefix='' valueSuffix=' $' shared="true" >
		<STYLE  color='#4572A7' fontSize='12px' padding='2px' />
	</TOOLTIP>
	
</HIGHCHART>

 

 

1.2 ） 将从数据库读取的模板转化为SourceBean。（去掉了里面的注释等没用的东西）   

 

                        String contentStr = new String(contentBytes);

SourceBean content = SourceBean.fromXMLString(contentStr);

 

<?xml version="1.0" encoding="ISO-8859-1"?>
<HIGHCHART height="100%" width="100%">
  <CHART type="waterfall" zoomType="xy"/>
  <TITLE color="#325072" text="$F{ANAG} Trend"/>
  <SUBTITLE text="Year: 2012 - State: $P{state}"/>
  <COLORS_LIST>
    <COLORS color="#123a9c" downColor="#b30f00" sumColor="#66b266 " upColor="#90ee90"/>
  </COLORS_LIST>
  <LEGEND enabled="false"/>
  <X_AXIS alias="name" type="category">
    <TITLE text=""/>
  </X_AXIS>
  <Y_AXIS_LIST>
    <Y_AXIS alias="VALUE" lineWidth="1" min="0">
      <TITLE text=""/>
    </Y_AXIS>
  </Y_AXIS_LIST>
  <PLOT_OPTIONS>
    <WATERFALL enableMouseTracking="true">
      <DATA_LABELS enabled="true" formatter="numberFormat(0,&quot;,&quot;,&quot;.&quot;)" inside="false">
        <STYLE color="black" fontSize="12px"/>
      </DATA_LABELS>
    </WATERFALL>
  </PLOT_OPTIONS>
  <SERIES_LIST>
    <SERIES alias="NAME,VALUE" colorAlias="color" isIntSumAlias="ISINTSUM" isSumAlias="ISSUM"/>
  </SERIES_LIST>
  <TOOLTIP backgroundColor="#FCFFC5" enabled="true" pointFormat=":{point.y}&lt;/b>&lt;br/>" shadow="true" shared="true" valueDecimals="0" valuePrefix="" valueSuffix=" $">
    <STYLE color="#4572A7" fontSize="12px" padding="2px"/>
  </TOOLTIP>
</HIGHCHART>

 

 

2) //将xml文件对象sourceBean转成highchart的config能识别的json对象格式。

 //converts the template from xml to json format

JSONTemplateUtils.getJSONTemplateFromXml(SourceBean xmlTemplate, JSONArray parsJSON) //73

 

{
      chart: { 
      type: 'waterfall'
       ,       zoomType: 'xy'
       }
,       title: { 
      text: '$F{ANAG} Trend'
       ,       color: '#325072'
       }
,       subtitle: { 
      text: 'Year: 2012 - State: AL '
       }
,       colors: [ 
{ 	
      color: '#123a9c'
       ,       upColor: '#90ee90'
       ,       downColor: '#b30f00'
       ,       sumColor: '#66b266 '
} 	
       ]
,       legend: { 
      enabled: false
       }
,       xAxis: { 
      alias: 'name'
       ,       type: 'category'
       ,       title: { 
      text: ''
       }
       }
,       yAxis: [ 
{ 	
      min: 0.0
       ,       lineWidth: 1.0
       ,       alias: 'VALUE'
       ,       title: { 
      text: ''
       }
} 	
       ]
,       plotOptions: { 
      waterfall: { 
      enableMouseTracking: true
       ,       dataLabels: { 
      enabled: true
       ,       formatter: 'numberFormat(0,",",".")'
       ,       inside: false
       ,       style: { 
      color: 'black'
       ,       fontSize: '12px'
       }
       }
       }
       }
,       series: [ 
{ 	
      alias: 'NAME,VALUE'
       ,       isIntSumAlias: 'ISINTSUM'
       ,       isSumAlias: 'ISSUM'
       ,       colorAlias: 'color'
} 	
       ]
,       tooltip: { 
      backgroundColor: '#FCFFC5'
       ,       enabled: true
       ,       shadow: true
       ,       pointFormat: ':{point.y}</b><br/>'
       ,       valueDecimals: 0.0
       ,       valuePrefix: ''
       ,       valueSuffix: ' $'
       ,       shared: true
       ,       style: { 
      color: '#4572A7'
       ,       fontSize: '12px'
       ,       padding: '2px'
       }
       }
}

 

3）response响应给前端。要根据publisherName指定的逻辑视图找到返回的页面