html5 统计图表曲线坐标,js统计图表FineReport多维度坐标轴图

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

1. 描述

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

2. 示例

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

2.1 数据准备

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

2.2 新建图表

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

2.3 图表数据

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

2.4 维度添加

效果图中显示了多个分类维度，点击分类轴后面的

按钮，添加一个分类轴地区，如下图：

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

2.5 图表样式

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

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

2.6 效果查看

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

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

3. 总结

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