版本：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 + "</b> : <b>"+ this.point.y +"</b>M </b> 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}</b><br/>" 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,",",".")" 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}</b><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指定的逻辑视图找到返回的页面
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?