页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

Title_font
Name概要说明

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

瀑布图采用绝对值与相对值结合的方式,来表达数个特定数值之间的数量变化关系。

这种效果的图形能够在反应数据多少的同时,更能直观反应出数据的增减变化过程。

  • 瀑布图的特点说明如下:

优势展示两个数据点之间的演变过程。

劣势 没有柱状图、条形图的使用场景多,适用情况单一。

数据要求:一个分类值,一个指标值。数据之间要有演变过程 。

适用场景 适用于解释两个数据值之间的差异是由哪几个因素贡献,每个因素的贡献比例,展示两个数据值之间的演变过程。例如:某公司当年的现金流情况,从年初的现金流,经过当年各种增加、减少的情况,最终演变成年底的现金流。

 

 

 

 

Title_font
Name实现方案

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

业务场景描述:

统计一周的收支增减变化情况。

数据结构:

收支情况有正负之分,而且是一个随时间变动的数据流。

Image Added

定制要点:

将“日期”字段作为“分类(X)轴”,“收支情况”字段作为“指标(Y)轴”。

预览效果:

Image Added

如上瀑布图表示了一周的收支情况,红色柱条表示收入,蓝色柱条表示支出,收入柱条的下方表示起点,上方表示终点,支出柱条的上方表示起点,下方表示终点,柱条的高度表示该日期所对应的值,后一个柱条是以前一个柱条的终点高度作为起点,最后一个柱条终点所在高度对应的值就是收入支出后的余额;

2017-04-01对应柱条为红色,表示收入,收入柱条下方为起点,上方为终点,柱条的高度代表收入值为253;2017-04-02对应的柱条为蓝色,表示支出,支出柱条上方为起点,下方为终点,柱条的高度代表支出的值为18;2017-04-02的柱条是以2017-04-01柱条的终点作为起点;如上图,从2017-03-31到2017-04-02收入支出余额为2017-04-02柱条终点即下方对应高度的值。