开发者社区> 问答> 正文

继续提问,报表页面如何实现饼图与列表数据联动

已解决

首先明确,是易搭的报表页面,不是自定义页面

实现目标:饼图与列表是相同的数据集,希望点击饼图时列表只显饼图点击部分示相关联的数据

1,如何在报表页面中给饼图添加事件?如何重新渲染列表。 2,页面属性中定义的变量,可以做为列表的过滤条件,这个“卡片变量”如何在代码中赋值

展开
收起
游客vfq42trgtjslc 2023-05-17 09:32:17 486 0
来自:钉钉宜搭
2 条回答
写回答
取消 提交回答
  • CSDN全栈领域优质创作者,万粉博主;InfoQ签约博主;华为云享专家;华为Iot专家;亚马逊人工智能自动驾驶(大众组)吉尼斯世界纪录获得者
    采纳回答

    报表页面可以通过以下步骤实现饼图与列表数据的联动:

    1. 在数据源中设置好饼图和列表的数据,确保它们是相互关联的。

    2. 在报表设计器中选择饼图和列表控件,并将它们放置在同一个报表页面中。

    3. 选中饼图控件,在属性窗口中找到“联动”选项,并勾选该选项。

    4. 在联动选项中,选择列表控件,并设置好联动条件。例如,如果要让饼图显示某个地区的销售额占比,那么可以设置为当列表中的该地区销售额发生变化时,饼图会自动更新。

    5. 根据需要调整饼图和列表控件的位置和样式,以便它们能够协调地展示数据。

    6. 最后,预览报表并检查饼图和列表是否正确联动。如果有问题,可以返回到设计器中进行调整。

    2023-05-17 09:45:27
    赞同 2 展开评论 打赏
  • 值得去的地方都没有捷径

    针对您的问题,我可以提供以下建议:

    如何在报表页面中给饼图添加事件? 您可以在易搭的报表设计器中,选中饼图图表,然后在右侧的图表属性中找到 "交互" 选项。在该选项中,您可以选择 "启用点击事件",并指定点击事件的处理函数。例如,您可以指定一个 JavaScript 函数,当用户点击饼图时,该函数会被调用。

    在该 JavaScript 函数中,您可以获取用户点击的饼图部分的数据,然后将这些数据传递给列表组件进行重新渲染。具体实现方式可以参考易搭官方文档或者易搭社区中的相关教程。

    如何在代码中赋值“卡片变量”? 在易搭的报表设计器中,您可以在页面属性中定义一个 "卡片变量",然后在报表页面的代码中使用该变量。具体实现方式如下:

    (1)在页面属性中定义一个 "卡片变量"。例如,您可以定义一个名为 "filter" 的变量,用于过滤列表中的数据。

    (2)在报表页面的代码中,使用 "this.cardVariables" 对象来获取卡片变量。例如,您可以使用以下代码获取 "filter" 变量的值:

    var filter = this.cardVariables.filter; (3)您可以在代码中修改卡片变量的值,然后使用该变量来过滤列表中的数据。例如,您可以使用以下代码将 "filter" 变量的值设置为 "test":

    this.cardVariables.filter = "test"; 希望这些信息能够帮助您解决问题。如果您还有其他问题或需要更多帮助,请告诉我。

    2023-05-20 18:37:06
    赞同 展开评论 打赏
问答分类:
BI
问答地址:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载