柱状图、横向柱图

更新时间:2020-02-10

柱状图可以利用高度来反映一段时间内,数据变化或显示各项之间的比较情况;条形图是将柱状图的 X、Y 轴翻转,适用于⽐较分类数据且数据标签较⻓的场景;堆积柱状图是将多个系列的柱子叠加起来,不仅可以直观的看出每个系列的值,还能反映出系列的总和;双向柱状图用于比较同类别的正反向数值差异。

柱状图的数据绑定

如:展示不同「地区」的「销售额」对比:

图片

柱状图还可以设置「颜色图例」来进行分组,例如展示「地区」下各个「产品类别」的「销售额」数据:

图片

柱图时间轴功能

当需要大量数据在前端根据时间自动进行展示时,可以开启时间轴,将数据按照时间轴进行轮播展示:

图片

时间轴可以搭配「基础」->「开启图表动画」中的「数据变更时的动画时长」和「动画延迟」等配置,使过渡动画更加自然流畅。

图片

可以通过「高级」->「时间轴设置」进行时间轴样式设置:

图片

叙事柱图

叙事柱图可以帮助用户方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。

注:叙事柱图只允许在「尝鲜版」、「高级版」、「私有化部署版」中使用

图片

可以通过在「toolbar」->「图表」->「叙事柱图」进行添加,在数据模型绑定方式时,可以通过在「柱状图表」中通过选择「展示方式」->「叙事模式」然后拖入相应的「叙事顺序」进行叙事柱图展示

图片

可以在「高级」->「叙事模式设置」中进行叙事模式内容显示以及位置设置,以及调整值变化速度

图片

堆积柱图

上面的示例,很多情况可能需要对「产品类别」进行堆积展示,如下效果:

图片

自定义配色

柱状图支持丰富的自定义配色设置,在「基础」面板中可以设置柱状图的各项配色,如:逐系列设置柱图的颜色,并且支持设置渐变效果,还可以设置阴影效果,让图表更具有立体感。

图片

柱状图的高级设置

柱状图的高级设置中包括了丰富的图表展示设置,用户可以根据需要开启相应的功能,有些设置和折线图是一样的,如:二次计算、X 轴缩放、默认展示系列数、数据单位、Y 轴类型、X 轴标签全部展示、标记和标线等,可参考折线图的高级配置。下面对柱图的的几个特殊功能作说明:

X/Y 轴翻转

X/Y 轴翻转是柱状图和横向柱状图(条形图)的切换开关:

图片

柱体设置

您可以设置柱顶展示数据,配置柱体的圆角、粗度,如:

图片

数据排序

可以在展示时,设置数据按照大小进行排序:

图片

正负柱图

只要数据中有负数,然后开启「X/Y 轴翻转」和「设置为堆积图」,就能得到正负柱图效果:

图片

双向对比柱图

如果数据有两个系列,都是正数,但是又想要达到类似上面的「正负柱图」双向对比的效果,我们就可以开启「设置为双向对比柱图」和「X/Y 轴翻转」,达到如下效果(效果和上面的「正负柱图」,但是左右两个方面都是正数):

图片

胶囊柱图

图片

轮播同步图表联动

在柱图开启了 tooltip 轮播和联动后,可以通过设置「轮播同步图表联动」,在 tooltip 轮播的同时触发下级图表的联动,详见「图表联动」。

本页内容