SpagoBI新需要改造:tableChartsレポートの実現

9513 ワード

ECharts

バージョン:spagobi 4.2

要求:1)tableはextjsで、ページを分けることができて、濾過することができます;
2)tableの1行をクリックすると、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)メソッドでのクエリー//
この方法は2つのことをします.
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で指定した論理ビューに基づいて戻るページを見つけるには

CListCtrlの使い方の概要と使い方(一)

iTextによるPDFレポートの中国語文字化けしを解決