折线图可以展示出数据随时间或有序类别的波动情况的趋势变化;区域堆积图可以反映出同类别各变量和不同变量的总和差异;线柱混搭是在同一个图表中结合柱状图与折线图,可以同时展示两个项⽬数据的特点。
折线图的数据绑定
如:展示每天的「销售额」数据波动趋势:
折线图还可以设置「颜色图例」来进行分组,例如按「地区」展示每天的「销售额」数据波动:
双 Y 轴功能
有时候要展示的两个指标的数据上存在量级的差异,例如在一个折线图上同时展示「销售额」和「利润率」的每天波动趋势,这两个指标的数据大小差异特别大,一个是每天数万,另外一个却是十几二十。Sugar中折线图可以实现双 Y 轴,「开启双 Y 轴」后,就会多一个「第二 Y 轴」的绑定项,如下绑定即可实现比较友好的展现方式:
时间轴功能
当需要大量数据在前端根据时间自动进行展示时,可以开启时间轴,将数据按照时间轴进行轮播展示:
时间轴可以搭配「基础」->「开启图表动画」中的「数据变更时的动画时长」和「动画延迟」等配置,使过渡动画更加自然流畅。
可以通过「高级」->「时间轴设置」进行时间轴样式设置:
叙事折线图
叙事折线图可以帮助用户方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。
注:叙事折线图只允许在「尝鲜版」、「高级版」、「私有化部署版」中使用
可以通过在「toolbar」->「图表」->「叙事折线图」进行添加,在数据模型绑定方式时,可以通过在「折线图表」中通过打开「数据」->「开启叙事模式」打开叙事折线图
线柱混搭功能
在上面开启了「双 Y 轴」的时候,一般都会同时开启「线柱混搭」效果,开启「线柱混搭」后,在 Y 轴的绑定字段上即可设置「图表类型」。我们将「销售额」的图表类型设置为柱图后,「刷新图表」后便可展示如下:
二次计算
有时仅展示数据源中的原始数据并不满足我们的需求,例如我们要展示从2020-01-01
以来,本年度的每天「销售额」累计值情况(2020-01-02 号展示的是 01 号和 02 号的累计和,03 号展示的是 01、02、03 三天的累计和,以此类推)。这时就可以使用「二次计算」功能:
如上图中,二次计算除了「累计和」方式,Sugar中还支持差异、百分比、差异百分比:
-
差异
差异计算的是当前值和上一个取值之间的差值,可以用来展示「销售额」每天的增长额波动情况:
-
百分比
百分比计算的是当前值除以上一个取值,然后乘以 100%
-
差异百分比
也可以叫做「环比」,计算的是当前值和上一个取值之间的差值,然后除以上一个取值,得出的百分比。可以用来展示「销售额」每天的增长环比如:
自定义配色
折线图支持丰富的自定义配色设置,在「基础」面板中可以设置折线图的各项配色,如:逐条设置折线的颜色,并且支持设置渐变效果,还可以设置阴影效果,让图表更具有立体感。
折线图的高级设置
折线图的高级设置中包括了丰富的图表展示设置,用户可以根据需要开启相应的功能。下面就介绍其中较常用的几种:
堆积和面积图
- 堆积图,如按「地区」展示每天的「销售额」,并且可以看出每天的总销售额情况:
- 面积图,如展示每个「地区」每天的「销售额」对比情况,面积图可以设置面积效果的透明度,也支持面积颜色的渐变:
默认展示线条数
如果折线条数过多,默认都展示的话会显的比较乱,此时用户可以开启默认展示的图例数,Sugar会默认只展示前 N 条折线,自动隐藏后面的折线。并且,用户可以通过点击图例开启被隐藏的数据,从而做数据的分析对比:
Y 轴类型
折线在展示数据时,有时需要对数据做一定的格式计算,如原始数据是字节数,我们想将其展示为带宽(带宽的计算方式是乘以 8,然后按照 1000 的进制进行计算)
数据单位
我们可以对 Y 轴展示的数据加上「数据单位」,如果是双 Y 轴,还可以分别对两个 Y 轴设置不同的单位,如下:
X 轴缩放
有时数据过多,用户希望可以在看到完整数据变化的同时也看到局部细节。那么可以在 X 轴特殊设置中打开「X 轴缩放」,效果如下:
X 轴标签全部展示
当数据较多时,默认情况下,X 轴的标签会自动优化,如果您想展示所有的 X 轴标签,也可通过调整标签的旋转角度、以及增大 X 轴的底边距来达到以下效果:
标记和基准标线
您可以对折线图设置一些标记展示如:最大值、最小值、周六竖线
,还有设置基准线
来做数据的对比,如下:
Tooltip 多图同步对齐
如下图,同时开启两个折线图的加入Tooltip多图同步对齐
,当您使用鼠标悬停到一个折线图上时,这两个折线图将会同步展示 tooltip 提示:
轮播同步图表联动
在开启了 tooltip 轮播和联动后,可以通过设置「轮播同步图表联动」,在 tooltip 轮播的同时触发下级图表的联动,详见「图表联动」。
数据点合并
在数据特别多的时候,会出现一个像素下多个数据点的情况,这时如果都进行绘制,一方面导致看不清数据,另一方面也影响展现性能,这时可以开启数据点合并功能,开启之后同一个像素下的数据点会进行合并,可以选择几种数据合并方法,默认取平均值,如下图所示: