1 Highcharts
Highcharts是一种图表工具,支持曲线图,柱状图,饼状图等多种图形方式。要创建Highcharts图表首先要有数据源和dataset。然后创建document。
1.1 Dataset
定义数据源,sql,参数等信息。
可以预览数据,以验证sql是否正确。
这里要注意:sql中的select部分的各个字段的名称要与模板文件中的定义相一致才行。例如如果想展示某个时间段内的订单销售额,成本,订单数量的曲线图,则需要sql为“select t.date as date,sum(t.count) as COUNTS,sum(t.cost) as COSTS,sum(t.sale) as SALES”
这三个sum的别名需要等同于配置文件中的名称配置。
1.2 模板文件
<?xml version="1.0" encoding="UTF-8"?>
<HIGHCHART height="80%" width="80%">
<CHART zoomType="xy"/>
<!-- 定义标题,${orderFrom}为查询参数的名称,这样可以动态生成标题-->
<TITLE text="销售和成本比较 ${orderFrom} ${groupName}"/>
<SUBTITLE text=""/>
<!-- 定义分组字段名称,必须与sql中select的分组字段相同名称-->
<X_AXIS alias="THE_DAY"/>
<!-- 定义曲线数据的名称,必须与sql中select的汇总字段相同名称-->
<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" opposite="true"><LABELS><STYLE color="#4572A7"/></LABELS><TITLE text="成本(costs)"><STYLE color="#4572A7"/></TITLE>
</Y_AXIS>
<Y_AXIS alias="counts"><LABELS><STYLE color="#FF0000"/></LABELS><TITLE text="订单量(counts)"><STYLE color="#FF0000"/></TITLE>
</Y_AXIS>
</Y_AXIS_LIST>
<LEGEND align="left" backgroundColor="#FFFFFF" borderWidth="1" floating="true" layout="vertical" shadow="true" verticalAlign="top" x="120" y="100"/>
<SERIES_LIST allowPointSelect="true">
<!-- 定义图表中曲线的名称-->
<SERIES alias="sales" color="#4572A7" name="销售额(sales)" value="sales" type="spline"/>
<SERIES alias="costs" color="#89A54E" name="成本(costs)" value="costs" type="spline" />
<SERIES alias="counts" color="#FF0000" name="订单量(counts)" value="counts" type="spline" yAxis="2"/>
</SERIES_LIST>
</HIGHCHART>
1.3 Document
打开document定义页面:
Type为Dashboard,Engine为ChartEngine。Dataset选择为上一步创建的dataset
定义参数,并引用ADM,注意url name与dataset中的定义的名称相同。选择模板文件后保存。
查看document:
点击菜单栏中的user menu,选择documents browser
这里显示的菜单必须在功能菜单定义(analytical model的FUNCTIONALITIES management)中配置完成,然后在document的定义中选择关联的功能节点
也可以在objects tree中执行document
点击document名称,选择execute。执行document后会打开选择参数页面:
输入参数完成后,点击左上角的执行图标打开highcharts主页面:
highcharts其他几种图形方式可以参考spagobi demo中的模板文件。
也可以参考:http://wiki.spagobi.org/xwiki/bin/view/spagobi_server/Highcharts+library