spagobi系列文章-04 Highcharts配置

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