标签：
SpagoBI offers a variety of widgets‘ examples realized with the Highcharts library, that can be divided according to the characteristics, in the following categories:
<HIGHCHART>
<CHART type=‘bar‘/>
<TITLE text=‘Sales by Region‘/>
<SUBTITLE text=‘USA Countries‘ />
<X_AXIS title=‘States‘ alias=‘sales_state‘/>
<Y_AXIS min=‘0‘>
<TITLE text=‘Sales - Cost Amount‘ align=‘high‘/>
</Y_AXIS>
<LEGEND layout=‘vertical‘
align=‘right‘
verticalAlign=‘top‘
x=‘-100‘
y=‘100‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
<PLOT_OPTIONS>
<BAR>
<DATA_LABELS enable=‘true‘/>
</BAR>
</PLOT_OPTIONS>
<SERIES_LIST>
<SERIES name="Store sales" alias="store_sales" />
<SERIES name="Store cost" alias="store_cost" />
</SERIES_LIST>
</HIGHCHART>
<HIGHCHART width=‘100%‘ height=‘100%‘>
<CHART type=‘pie‘ defaultSeriesType=‘pie‘/>
<TITLE text=‘Browser market shares at a specific website, 2010‘ />
<SUBTITLE text=‘Simple subtitle‘ />
<PLOT_OPTIONS >
<PIE allowPointSelect=‘true‘ cursor=‘pointer‘ >
<DATA_LABELS enabled=‘true‘ color=‘#000000‘ connectorColor=‘#000000‘/>
</PIE>
</PLOT_OPTIONS>
<SERIES_LIST>
<SERIES type=‘pie‘ name=‘Browser share‘ alias=‘MEDIA,VALUE‘/>
</SERIES_LIST>
<LEGEND layout=‘vertical‘
align=‘right‘
verticalAlign=‘top‘
x=‘-100‘
y=‘100‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
</HIGHCHART>
Note: It shows two different series values and it‘s usefull to compare their. For example the same data about two different years.
<HIGHCHART width=‘100%‘ height=‘100%‘>
<CHART margin=‘[50, 0, 0, 0]‘ plotBackgroundColor=‘none‘ plotBorderWidth=‘0‘ plotShadow=‘false‘ />
<TITLE text=‘Sales and Costs - Market Shares for Product Departments‘ />
<SUBTITLE text=‘Sales and Costs of ${ProdFamily} in ${State}‘ />
<!-- defines a personal palette of colors -->
<COLORS_LIST>
<COLORS color="#058DC7, #50B432, #ED561B, #DDDF00, #24CBE5, #64E572, #FF9655, #FFF263, #6AF9C4"/>
</COLORS_LIST>
<SERIES_LIST>
<SERIES name=‘Sales‘ type=‘pie‘ size=‘45%‘ innerSize=‘20%‘ alias=‘DEPARTMENT,SALES‘ >
<DATA_LABELS enabled=‘false‘/>
</SERIES>
<SERIES name=‘Costs‘ type=‘pie‘ innerSize=‘45%‘ alias=‘DEPARTMENT,COSTS‘ >
<DATA_LABELS enabled=‘true‘ color=‘#000000‘ connectorColor=‘#000000‘/>
</SERIES>
</SERIES_LIST>
<TOOLTIP backgroundColor=‘#FCFFC5‘ crosshairs=‘true‘ enabled=‘true‘ shadow=‘true‘ />
</HIGHCHART>
<HIGHCHART width=‘100%‘ height=‘100%‘>
<CHART type=‘pie‘ defaultSeriesType=‘pie‘/>
<TITLE text=‘Browser market shares at a specific website, 2010‘/>
<SUBTITLE text=‘Simple subtitle‘ />
<PLOT_OPTIONS >
<PIE allowPointSelect=‘true‘ cursor=‘pointer‘ showInLegend=‘true‘>
<DATA_LABELS enabled=‘false‘/>
</PIE>
</PLOT_OPTIONS>
<SERIES_LIST>
<SERIES type=‘pie‘ name=‘Browser share‘ alias=‘MEDIA,VALUE‘/>
</SERIES_LIST>
<LEGEND layout=‘vertical‘
align=‘right‘
verticalAlign=‘top‘
x=‘-100‘
y=‘100‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
</HIGHCHART>
<HIGHCHART width=‘100%‘ height=‘100%‘>
<CHART type=‘scatter‘ defaultSeriesType=‘scatter‘ zoomType=‘xy‘ backgroundColor=‘white‘/>
<TITLE text=‘Sales versus Costs‘ />
<SUBTITLE text=‘Detail for month‘ />
<X_AXIS startOnTick=‘true‘ endOnTick=‘true‘ showLastLabel=‘true‘>
<TITLE text=‘Sales‘ enabled=‘true‘/>
</X_AXIS>
<Y_AXIS>
<TITLE text=‘Costs‘/>
</Y_AXIS>
<LEGEND layout=‘vertical‘
align=‘right‘
verticalAlign=‘top‘
x=‘-100‘
y=‘100‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
<PLOT_OPTIONS >
<SCATTER>
<MARKER radius=‘5‘>
<STATES>
<HOVER enabled=‘true‘ lineColor=‘rgb(100,100,100)‘/>
</STATES>
</MARKER>
</SCATTER>
</PLOT_OPTIONS>
<SERIES_LIST allowPointSelect=‘true‘>
<SERIES name=‘Sales‘ color=‘rgba(223, 83, 83, .5)‘ alias=‘THE_MONTH,SALES‘ />
<SERIES name=‘Costs‘ color=‘rgba(119, 152, 191, .5)‘ alias=‘THE_MONTH,COSTS‘ />
</SERIES_LIST>
</HIGHCHART>
<HIGHCHART width=‘80%‘ height=‘80%‘>
<CHART type=‘line‘ zoomType=‘x‘/>
<TITLE text=‘Monthly Average Temperature‘ />
<SUBTITLE text=‘Source: WorldClimate.com‘ />
<PLOT_OPTIONS >
<LINE enableMouseTracking=‘true‘>
<DATA_LABELS enabled=‘true‘/>
</LINE>
</PLOT_OPTIONS>
<SERIES_LIST>
<SERIES name=‘London‘ alias=‘VALUE‘ />
</SERIES_LIST>
<X_AXIS/>
<Y_AXIS>
<TITLE text=‘Temperature (¶øC)‘/>
</Y_AXIS>
<LEGEND enabled=‘false‘/>
</HIGHCHART>
<HIGHCHART>
<CHART type=‘line‘ defaultSeriesType=‘line‘ zoomType=‘x‘ spacingRight=‘20‘/>
<TITLE text=‘USD to EUR exchange rate from 2006 through 2008‘ />
<SUBTITLE text=‘Click and drag in the plot area to zoom in‘ />
<PLOT_OPTIONS >
<AREA lineWidth=‘1‘ shadow=‘false‘>
<FILL_COLOR linearGradient=‘[0, 0, 0, 300]‘>
<STOPS_LIST>
<STOPS>[0, ‘rgb(69, 114, 167)‘]</STOPS>
<STOPS>[1, ‘rgba(2,0,0,0)‘]</STOPS>
</STOPS_LIST>
</FILL_COLOR>
</AREA>
</PLOT_OPTIONS>
<SERIES_LIST>
<SERIES name=‘USD to EUR‘ type=‘area‘ pointInterval=‘8640000‘ pointStart=‘1123459200000‘ alias=‘VALUE‘ />
</SERIES_LIST>
<X_AXIS maxZoom=‘8640000‘ type=‘datetime‘/>
<Y_AXIS min=‘0.6‘ startOnTick=‘false‘ showFirstLabel=‘false‘>
<TITLE text=‘Exchange rate‘/>
</Y_AXIS>
<LEGEND enabled=‘false‘/>
</HIGHCHART>
Note: pay your attention to the category axis (x) settings. Its values are created automatically by the Highcharts library using the configuration setted into the SERIES tag (pointInterval and pointStart configure the X_AXIS that is defined as ‘datetime‘ type). So the xAxis value aren‘t got by a dataset column. It‘s usefull when you are sure that the data follow the regular datetime values generated.
<HIGHCHART width=‘80%‘ height=‘80%‘>
<CHART zoomType=‘xy‘ />
<TITLE text=‘Sales vs Costs‘ />
<SUBTITLE text=‘Detail for month‘ />
<X_AXIS alias=‘THE_MONTH‘ />
<Y_AXIS_LIST>
<Y_AXIS alias=‘SALES‘>
<LABELS>
<STYLE color=‘#89A54E‘ />
</LABELS>
<TITLE text=‘Sales‘>
<STYLE color=‘#89A54E‘ />
</TITLE>
</Y_AXIS>
<Y_AXIS alias=‘COSTS‘ opposite=‘true‘>
<LABELS>
<STYLE color=‘#4572A7‘ />
</LABELS>
<TITLE text=‘Costs‘>
<STYLE color=‘#4572A7‘ />
</TITLE>
</Y_AXIS>
</Y_AXIS_LIST>
<LEGEND layout=‘vertical‘
align=‘left‘
verticalAlign=‘top‘
x=‘120‘
y=‘100‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
<SERIES_LIST allowPointSelect=‘true‘>
<SERIES name=‘Sales‘ color=‘#4572A7‘ type=‘column‘ yAxis=‘1‘ alias=‘SALES‘ />
<SERIES name=‘Costs‘ color=‘#89A54E‘ type=‘spline‘ alias=‘COSTS‘ />
</SERIES_LIST>
</HIGHCHART>
<HIGHCHART width=‘80%‘ height=‘80%‘>
<CHART zoomType=‘xy‘ />
<TITLE text=‘Sales, Costs and Unit sales‘ />
<SUBTITLE text=‘Detail for month‘ />
<X_AXIS alias=‘THE_MONTH‘ />
<Y_AXIS_LIST>
<Y_AXIS alias=‘SALES‘ opposite=‘true‘>
<LABELS>
<STYLE color=‘#89A54E‘ />
</LABELS>
<TITLE text=‘Sales‘>
<STYLE color=‘#89A54E‘ />
</TITLE>
</Y_AXIS>
<Y_AXIS alias=‘COSTS‘ gridLineWidth=‘0‘>
<LABELS>
<STYLE color=‘#4572A7‘ />
</LABELS>
<TITLE text=‘Costs‘>
<STYLE color=‘#4572A7‘ />
</TITLE>
</Y_AXIS>
<Y_AXIS alias=‘UNIT_SALES‘ gridLineWidth=‘0‘ opposite=‘true‘>
<LABELS>
<STYLE color=‘#AA4643‘ />
</LABELS>
<TITLE text=‘Unit Sales‘>
<STYLE color=‘#AA4643‘ />
</TITLE>
</Y_AXIS>
</Y_AXIS_LIST>
<LEGEND layout=‘vertical‘
align=‘left‘
verticalAlign=‘top‘
x=‘120‘
y=‘80‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
<SERIES_LIST allowPointSelect=‘true‘>
<SERIES name=‘Sales‘ color=‘#89A54E‘ type=‘column‘ yAxis=‘1‘ alias=‘SALES‘ />
<SERIES name=‘Costs‘ color=‘#4572A7‘ type=‘spline‘ alias=‘COSTS‘ dashStyle=‘shortdot‘ yAxis=‘2‘>
<MARKER enabled="false"/>
</SERIES>
<SERIES name=‘Unit Sales‘ color=‘#AA4643‘ type=‘spline‘ alias=‘UNIT_SALES‘ />
</SERIES_LIST>
</HIGHCHART>
This is a particular chart, different by the standard. It‘s composed by two charts: the summary (below) and the detail (top).
They show the same data but with different aggregation levels. All informations are got by the dataset. The engine doesn‘t make operation of aggregation.
In this example the summary or master shows data monthly while the detail shows the daily detail.
Is possible to use a slider (zoom) on the master to change the range of the detail chart.
At the moment, this type of chart is available with line charts on simple xy axis. Multiserie are managed.
<HIGHCHART width=‘80%‘ height=‘60%‘>
<CHART type=‘line‘ subType=‘MasterDetail‘ zoomType=‘x‘/>
<TITLE text=‘ ‘ />
<SUBTITLE text=‘ ‘ />
<PLOT_OPTIONS >
<AREA lineWidth=‘1‘ shadow=‘false‘>
<FILL_COLOR linearGradient=‘[0, 0, 0, 300]‘>
<STOPS_LIST>
<STOPS>[0, ‘#4572A7‘]</STOPS>
<STOPS>[1, ‘rgba(0,0,0,0)‘]</STOPS>
</STOPS_LIST>
</FILL_COLOR>
</AREA>
</PLOT_OPTIONS>
<SERIES_LIST allowPointSelect=‘true‘ >
<SERIES name=‘Store sales‘ type=‘area‘ alias=‘month_utc,sales_for_month‘ />
<SERIES name=‘Store costs‘ type=‘area‘ alias=‘month_utc,costs_for_month‘ />
</SERIES_LIST>
<X_AXIS type=‘datetime‘ endOnTick=‘true‘ showLastTickLabel=‘false‘ maxZoom=‘2678400000‘ >
<PLOT_BANDS_LIST >
<PLOT_BANDS id=‘mask-before‘ from=‘Date.UTC(1998,0,1)‘ to=‘Date.UTC(1998,7,1)‘ defaultMax=‘Date.UTC(1998,11,31)‘ color=‘rgba(0, 0, 0, 0.2)‘ />
</PLOT_BANDS_LIST>
</X_AXIS>
<Y_AXIS >
<LABELS enabled=‘true‘/>
<TITLE text=‘ ‘/>
</Y_AXIS>
<TOOLTIP enabled=‘true‘/>
<LEGEND enabled=‘false‘/>
<DETAIL_CHART>
<CHART type=‘line‘ zoomType=‘x‘/>
<TITLE text=‘Store costs vs Store sales‘ />
<SUBTITLE text=‘Select an area by dragging across the lower chart‘ />
<PLOT_OPTIONS >
<LINE enableMouseTracking=‘true‘>
<DATA_LABELS enabled=‘false‘/>
</LINE>
</PLOT_OPTIONS>
<X_AXIS type=‘datetime‘ maxZoom=‘0.1‘>
<LABELS enabled=‘true‘/>
<TITLE text=‘ ‘/>
</X_AXIS>
<Y_AXIS maxZoom=‘0.1‘>
<LABELS enabled=‘true‘/>
<TITLE text=‘ ‘/>
</Y_AXIS>
<LEGEND layout=‘vertical‘
align=‘left‘
verticalAlign=‘top‘
floating=‘true‘
borderWidth=‘1‘
backgroundColor=‘#FFFFFF‘
shadow=‘true‘/>
<TOOLTIP enabled=‘true‘/>
<SERIES_LIST allowPointSelect=‘false‘ >
<SERIES name=‘Store costs‘ color=‘rgba(223, 83, 83, .5)‘ alias=‘the_date,store_cost‘ type=‘line‘ >
<MARKER enabled=‘false‘>
<HOVER enabled=‘true‘ radius=‘3‘ />
</MARKER>
</SERIES>
<SERIES name=‘Store sales‘ color=‘rgba(119, 152, 191, .5)‘ alias=‘the_date,store_sales‘ type=‘line‘ >
<MARKER enabled=‘false‘>
<HOVER enabled=‘true‘ radius=‘3‘ />
</MARKER>
</SERIES>
</SERIES_LIST>
</DETAIL_CHART>
</HIGHCHART>
Pay attention to ‘subType‘ property. It‘s necessary set it to ‘MasterDetail‘ to create a master-detail chart.
Also the ‘height‘ property is important. It specifies the detail height. The master height is calculated as 1/3 of the summary.
For this example is very important that the dataset returns the date values in milliseconds format because in this way is possible to use the ‘datetime‘ type for the axis X.
Here an example of the data returned for this document (pay attention to month_utc and the_date values: they are in milliseconds!):
<HIGHCHART width="100%" height="100%" >
<CHART type="waterfall" />
<TITLE text="Unit sales" color="#325072"/>
<SUBTITLE text= "" />
<COLORS_LIST>
<COLORS color="#058DC7" upColor="#8bbc21" downColor="#492970" sumColor="#0d233a"/>
</COLORS_LIST>
<LEGEND enabled=‘false‘/>
<X_AXIS alias=‘state‘ type=‘category‘ >
<TITLE text= "" />
</X_AXIS>
<Y_AXIS_LIST>
<Y_AXIS min="0" lineWidth="1" alias=‘value‘ >
<TITLE text= "Values" />
<PLOT_LINES_LIST>
<PLOT_LINES color="#8bbc21" width="2" value="51" />
</PLOT_LINES_LIST>
</Y_AXIS>
</Y_AXIS_LIST>
<PLOT_OPTIONS>
<WATERFALL enableMouseTracking=‘true‘>
<DATA_LABELS enabled=‘false‘ >
<STYLE color=‘#FFFFFF‘ fontWeight=‘bold‘ fontSize=‘12px‘ padding=‘2px‘ />
</DATA_LABELS>
</WATERFALL>
</PLOT_OPTIONS>
<SERIES_LIST>
<SERIES alias="state,store_sales" isIntSumAlias="isintermediatesum" isSumAlias="issum" colorAlias="color" />
</SERIES_LIST>
<TOOLTIP backgroundColor=‘#FCFFC5‘ enabled=‘true‘ shadow=‘true‘ text=‘ {CATEGORY} - {SERIE_NAME} : {SERIE}‘ >
<STYLE color=‘#4572A7‘ fontSize=‘12px‘ padding=‘2px‘ />
</TOOLTIP>
</HIGHCHART>
Details:
In the detail of the SERIES, you can specify more attributes than the other types of graphic:
教程：SpagoBI开源商业智能之XML Template 图表模板
标签：
原文地址：http://www.cnblogs.com/mybi/p/4231677.html
