第4章 图表示例

1.1 饼图

饼图显示一个数据集中各项的大小与各项总和的比例。饼图中的扇区显示为整个饼图的百分比。

设计饼图时要注意：

• 饼图只支持一个数据集。
• 要绘制的数据不能有负值，而且最好不要有零值。
• 分组类别不要过多。

饼图包括普通饼图和3D饼图。

表4.1   示例数据集：

图4.1  data属性设计图

运行结果：

图4.2  饼图运行结果图

1.2  垂直柱图

柱图一般用于显示各项目间的比较情况。

设计柱图时要注意：

• 数据轴过长，会造成数据对比不清晰。

垂直柱图中还包含3D垂直柱图、堆叠式垂直柱图、3D堆叠式垂直柱图、垂直圆柱图、3D垂直圆柱图。

表4.2    示例数据集：

按照如图所示设置垂直柱图data属性。

其中“自动根据数据进行分组显示”的概念可参考在4.10.1节的累积对比分析示例。

柱图与饼图data属性的区别是多了“分组条件”设置。“分组条件”表示在绘制柱图时，会以RCOMPANYNAME字段进行二次分组。

图4.3  data属性设计图

运行结果：

图4.4  垂直柱图运行结果图

1.3  水平柱图

参考4.2节，垂直柱图的介绍。

水平柱图中还包含3D水平柱图、堆叠式水平柱图、3D堆叠式水平柱图、水平圆柱图、3D水平圆柱图。

表4.3    示例数据集：

运行结果：

图4.5  水平柱图运行结果图

1.4  折线图

折线图设计与柱图类似，参考4.2节。

折线图包括垂直线图、3D垂直线图、水平线图、3D水平线图、垂直xy线图、水平xy线图。

表4.4    示例数据集：

 

图4.6  data属性设计图

运行结果：

图4.7  折线图运行结果图

1.5  面积图

面积图强调部分与整体的关系，通过显示所绘制的值的总和，引起人们对总值趋势的注意。

面积图与柱图类似，都可以引用一个或多个数据集。

面积图包括垂直面积图和水平面积图。

表4.5    示例数据集：1

 

图4.8  data属性设计图

运行结果：

图4.9  面积图运行结果图

1.6  时序图

时序图可用于统计、分析数据随时间变化的发展情况。

表4.6    示例数据集：

示例中将日期作为分类轴，销售额作为数据轴。

图4.10  data属性设计图

运行结果：

图4.11  时序图运行结果图

1.7  仪表盘

仪表盘包括简单仪表盘、刻度盘、弧度仪表盘、温度计、混合刻度盘。

表4.7    示例数据集：

运行结果：

图4.12  仪表盘运行结果图

1.8  甘特图

甘特图是一种按照时间进度标出工作活动，常用于项目管理的图表。它通过活动列表和时间刻度在图示中形象的表现出任何特定项目的活动顺序与持续时间。

甘特图的横轴表示时间，纵轴表示要安排的活动

表4.8    示例数据集：

示例引用了一个数据集，关联了两组数据项，一组表示计划时间，另一组表示实际时间。

运行结果：

图4.13  甘特图运行结果图

1.9  雷达图

表4.9    示例数据集：

图4.14  data属性设计图

运行结果：

图4.15  雷达图运行结果图

1.10  图表特性

1.10.1  累计对比分析

图表中进行累积对比分析的方法是，在数据轴中使用求和函数对其中一个字段计算合计，再将合计值和分组值分别作为图表中的两个数据集显示。

下图是一个在柱图中实现累积对比分析的data属性编辑界面：

图4.16  data属性设计图

表4.10   示例数据集：

在设置柱图的data属性时，去掉属性编辑器左上角“自动根据数据进行分组显示”。代表数据集根据分类轴字段进行分组，且每个分组只表现为一个柱形图展现。

从上面的例子可以看到，分组数据项有两个，都以s1作为数据集，分类轴都是RCATEGORYNAME（分组字段），数据轴一个是ALL_CB、一个是SUM(ALL_CB)，表示库存和库存总和。

运行结果：

图4.17  图表累积分析运行结果图

1.10.2  图表链接

图表链接，是在图表不同区域建立链接的方式，用于需要根据图表区域中的数据关联出更详细的内容的需求。

在图表的data属性中，我们可以定义需要的链接路径。如下图：

图4.18  图表链接属性设计图

链接地址，形如：

/demo/report/process/links/chartLinks.w?category=’RCATEGORYNAME’&number=$RCATEGORYNAME&process=’/demo/report/process/links/linksProcess’&activity=’chartLinksActivity’

表示链接到chartLinks.w页面，并传入参数category、number，其中number为业务字段RCATEGORYNAME的值。

链接方式为dialog，链接页面标题为明细+“引用业务字段RCATEGORYNAME的值”。

运行结果如下，点击饼图的红色区域（产品类别为饮料）时，以对话框的方式链接到页面，并且显示出类别为饮料的所有产品数据。

 

图4.19  dialog模式运行结果图

图表链接还包含另外两种模式：

replace模式，链接页面会替换当前图表页面后打开。

 

图4.20  replace模式运行结果图

Window模式，链接页面会在一个新的功能页中打开。

图4.21  window模式运行结果图

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443