js统计图表FineReport多维度坐标轴图

js统计图表FineReport多维度坐标轴图


1. 描述

多维度坐标轴图是指在图表中展示多个维度,不仅仅局限于2个维度(展示2个维度只能比较一个维度之间的数据),可以在同一张图表中同时比较2个或2个以上的维度的数据,如下图,可比较华东地区各个产品类型的销量情况,也可以比较饮料产品类型在华东华北的销量情况:

js统计图表FineReport多维度坐标轴图_第1张图片

2. 示例

以FRDemo数据库中的销量表为例,实现上图的效果。

2.1 数据准备

新建一个数据集ds1:SELECT * FROM [销量]

2.2 新建图表

合并一片单元格区域,在该区域中添加图表,图表类型选择柱形图,如下图:

js统计图表FineReport多维度坐标轴图_第2张图片

2.3 图表数据

点击图表属性表-数据,数据来源选择数据集数据,数据集选择ds1,分类轴选择产品类型,系列名选择产品,系列值为销量,如下图:

js统计图表FineReport多维度坐标轴图_第3张图片

2.4 维度添加

效果图中显示了多个分类维度,点击分类轴后面的按钮,添加一个分类轴地区,如下图:

js统计图表FineReport多维度坐标轴图_第4张图片

注:分类轴个数最多只能添加到3个,只限于柱形图和折线图,其他类型图表只能单分类轴,并且多分类轴数据只能支持“规整”的数据,以上图为例,每个地区下的产品类型必须保持完全一致,即华东地区下面有A、B、C三个产品类型,那么华北地区下面也只能有这三种产品类型,不能多也不能少。

2.5 图表样式

多维度坐标轴图设置分类轴样式时,只作用于最上层分类维度,其他分类维度采用默认样式(微软雅黑,9号字体),不可更改,如下图,我们修改分类轴名称的颜色,点击图表属性表-样式>坐标轴>分类轴,修改分类轴的显示样式:

js统计图表FineReport多维度坐标轴图_第5张图片

注:同分类轴设置一样,交互属性-超级链接和条件属性中传递的参数也是作用于最上层分类维度。

2.6 效果查看

将鼠标放置在某一个柱子上会显示所有坐标轴的信息,不同分类维度之间的信息用空格隔开,如上效果。模板效果在线查看请点击DemensionalChart.cpt

已完成模板请参照%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\DemensionalChart.cpt

3. 总结

多维坐标轴图是通过添加多个分类轴来达到多个维度统计的效果,只有柱形图和折线图才能实现多维度效果,并且多维度坐标轴图不支持数据表和坐标轴缩放,分类轴最多只能添加3个,多维度分类轴数据只能是“规整”的数据。


你可能感兴趣的:(finereport,报表,js图表,多维度坐标轴图)