柱状图显示两个值_一个柱形图里显示两组数据

2024-12-2618:19:21销售经验1

教程:如何有序展示基本柱状图组件

想要让基本柱状图组件中的柱状图一个一个有序地显示出来,其实并不难。接下来,我们将详细解释整个过程。

一、预览效果

(预览效果图)

二、解决逻辑

基于已有的柱状图组件,我们再添加一个“滚动选项卡”和一个“多选选项卡”组件。通过“滚动选项卡”的自动轮播功能,控制“多选选项卡”的选中状态。当“多选选项卡”发出回调时,“基本柱状图”组件会接收这个回调,并逐一筛选出对应的数据,从而实现柱状图的逐条显示。简而言之,就是通过“滚动选项卡”控制“多选选项卡”,再由“多选选项卡”控制“基本柱状图”。

三、实操教程

在界面上添加“柱状图”、“滚动选项卡”和“多选选项卡”组件。这些组件在画布中如果不需要显示完整,可以调整位置至画布外部。

接着,在“滚动选项卡”中填入或接入需要展示的数据。以本例为例,我们将展示6个柱状图,因此需要设置6组数据。

数据示例(可直接复制):

在样式设置中,将默认的选中状态改为第一个数据。

别忘了开启“滚动选项卡”的自动轮播功能哦~

确保“多选选项卡”的数据与“滚动选项卡”的数据保持一致。

在回调设置中,发出信号以控制柱状图的显示。字段值对应数据中的数值字段,给发出的回调信号设置一个易于识别的名称。

对于“柱状图”组件的数据处理,要确保y轴值为0,并设置好对应的数据组数量(即空柱状的位置)。

写上相应的过滤器,接收回调字段,使柱状图的显示值与选项卡中的数据一一对应。

完成以上配置后,效果如下:(实际效果图)

您可以点击此处获取demo版本进行进一步体验。

EasyV数字孪生

易知微数字孪生世界

若您需要更多案例详情,请前往案例中心进行查看,包含智慧水利、智慧城市、智慧工厂、智慧教育等各领域的应用案例。

  • 版权说明:
  • 本文内容由互联网用户自发贡献,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 295052769@qq.com 举报,一经查实,本站将立刻删除。