所有文档

          百度数据可视化 Sugar

          折线图、线柱混搭

          折线图可以展示出数据随时间或有序类别的波动情况的趋势变化;区域堆积图可以反映出同类别各变量和不同变量的总和差异;线柱混搭是在同一个图表中结合柱状图与折线图,可以同时展示两个项⽬数据的特点。

          折线图的数据绑定

          如:展示每天的「销售额」数据波动趋势:

          图片

          折线图还可以设置「颜色图例」来进行分组,例如按「地区」展示每天的「销售额」数据波动:

          图片

          双 Y 轴功能

          有时候要展示的两个指标的数据上存在量级的差异,例如在一个折线图上同时展示「销售额」和「利润率」的每天波动趋势,这两个指标的数据大小差异特别大,一个是每天数万,另外一个却是十几二十。Sugar中折线图可以实现双 Y 轴,「开启双 Y 轴」后,就会多一个「第二 Y 轴」的绑定项,如下绑定即可实现比较友好的展现方式:

          图片

          线柱混搭功能

          在上面开启了「双 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 轮播的同时触发下级图表的联动,详见「图表联动」。

          数据点合并

          在数据特别多的时候,会出现一个像素下多个数据点的情况,这时如果都进行绘制,一方面导致看不清数据,另一方面也影响展现性能,这时可以开启数据点合并功能,开启之后同一个像素下的数据点会进行合并,可以选择几种数据合并方法,默认取平均值,如下图所示:

          图片

          上一篇
          属性表格
          下一篇
          柱状图、横向柱图