版本: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指定的逻辑视图找到返回的页面