在同一图表组件中,如何切换不同的维度/度量,来查看不同的数据组合情况

在日常的可视化展示中,大家时常需要在一个图表组件中绑定多个动态的维度和度量。这样可以在展示数据时,根据需要切换不同的维度/度量,来查看不同的数据组合情况。

本次以Sugar BI为例,为大家介绍,在日常数据展示中,如何在一个图表组件中绑定多个动态的维度和度量。

我们可以在「饼状图,交叉透视表,普通表格,柱状图,折线图」组件中,来实现浏览状态下图表的动态维度和度量切换,更加灵活地按需切换字段进行数据分析和展示。

动态维度/度量分析支持两种模式:

  • 动态多选 :设置为动态多选后,每次可切换选择多个维度/度量字段来进行数据展示。

  • 动态单选 :设置为动态单选后,每次只可切换选择 1 个维度/度量字段来进行数据展示(例如饼图每次只能展示一个度量,下面场景实例中将详细描述)。

场景实例一

以下图表是一个展示某公司销售额按客户种类等和产品类别划分的交叉透视表:

如果我们想在该交叉透视表中根据展示需要,切换不同的维度和度量展示数据,可以这样实现:

1、在该交叉透视表的控制面板中,绑定行、列,指标的选项右侧,勾选「动态」选项,这时,您将可以拖入多个维度和度量字段,用作待展示的动态字段。

如下图中:我们分别开启了「动态列」,「动态行」,「动态指标」,并在列中又拖入「地区」,在行中又拖入「产品名称」,在「指标」中又拖入「一季度销量」、「二季度销量」、「三季度销量」、「四季度销量」字段作为待选择展示的动态数据字段。

2. 这时,图表右上角出现了配置按钮,点击该按钮,可以看到下拉列表中出现了刚才绑定的动态字段选项。注意,每一种数据维度和度量里的第一个字段会作为图表默认展示的字段,默认展示的字段不可取消展示,其余字段可以作为动态选项切换展示。

3. 在配置菜单中勾选需要展示的字段组合,这时,图表数据会动态刷新,展示相应的数据。

4. 如果您想配置多个字段作为图表默认展示的字段,可以在控制面板中需要默认展示的字段上右键,选择「固定展示-是」,这时,该字段会和第一个字段一起作为图表默认展示的字段。

场景实例2

以下图表是一个展示某公司四个季度销售额按地区划分的饼图,如果我们想在该饼图中根据地区维度,切换不同的度量展示数据,可以这样实现:

1、在该饼图的控制面板中绑定需要展示的维度字段「地区」,在度量选项的右侧,勾选「动态」选项,并选择「动态单选」,这时,您将可以拖入多个度量字段,用作待展示的动态字段。如下图中:在「扇区角度大小/度量」中拖入「一季度销量」、「二季度销量」、「三季度销量」、「四季度销量」字段作为待选择展示的动态度量字段。

2、这时,图表右上角出现了配置按钮,点击该按钮,可以看到下拉列表中出现了刚才绑定的动态字段选项。注意,每一种数据维度和度量里的第一个字段会作为图表默认展示的字段,动态单选模式下,每次仅可选择 1 个动态字段作为图表数据展示的字段。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在同一张 ECharts 图上点击按钮切换不同的后端数据,您需要使用 Ajax 请求来获取数据,并在请求成功后更新图表数据。具体的步骤如下: 1. 创建一个包含所有需要切换数据的数组。 2. 在 ECharts 的 option 设置一个初始数据,用于图表的初始化。 3. 创建一个按钮,绑定点击事件。 4. 在点击事件,使用 Ajax 请求来获取对应的后端数据。 5. 在请求成功后,使用 ECharts 的 setOption() 方法来更新图表数据,将获取到的数据传入 setOption() 方法即可。 6. 每次点击按钮时,都需要重新发起 Ajax 请求,并在请求成功后调用 setOption() 方法来更新图表数据。 以下是一个示例代码: ```javascript // 数据数组 var dataArr = [ {name: 'data1', url: '/api/data1'}, {name: 'data2', url: '/api/data2'} ]; // 初始化 option var option = { // 设置初始数据 series: [{ name: dataArr[0].name, data: [] }], // 其他配置 ... }; // 创建按钮 $('#btn').click(function() { // 获取按钮对应的数据 var data = dataArr[$(this).index()]; // 发起 Ajax 请求 $.ajax({ url: data.url, success: function(res) { // 更新图表数据 chart.setOption({ series: [{ name: data.name, data: res }] }); } }); }); ``` 在这个示例,我们创建了一个包含两个数据对象的数组 dataArr,其每个对象都包含了数据名称和后端数据 URL。然后在 ECharts 的 option 设置了一个初始数据(dataArr[0]),并创建了一个按钮,每次点击按钮时,都会获取按钮对应的数据,并发起 Ajax 请求来获取后端数据。在请求成功后,我们使用 setOption() 方法来更新图表数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值