Superset：基于数据动态控制图表显示与隐藏的需求

需求与场景 #

• 核心要求：仅当图表对应数据集的visible字段为true时，才在仪表板中显示该图表
• 实际场景：管理员可从15个问题中选择要提问的内容，每个问题对应一个展示用户回答结果的图表；未被选中的问题（QuestionVisible为False）对应的图表需隐藏，仅展示已选中的图表

问题响应数据 #

具体实现方法 #

因为只能通过仪表板CSS完成控制，按以下步骤操作：

1. 给图表容器添加关联标识
   每个问题对应的图表容器，需添加能关联QuestionId的标识，比如设置data-question-id="1"属性，或类名设为.question-chart-1，确保能通过数据匹配到对应图表。

2. 生成动态CSS规则
   根据数据中的QuestionVisible状态编写CSS：

   • 对QuestionVisible为False的问题（如ID1、2），添加隐藏规则：

     /* 基于data属性的写法 */
     [data-question-id="1"], [data-question-id="2"] {
       display: none !important;
     }
     
     /* 基于类名的写法 */
     .question-chart-1, .question-chart-2 {
       display: none !important;
     }
     

   • 对QuestionVisible为True的问题（如ID3、4），保持默认显示即可；若图表有默认隐藏样式，可添加display: block !important（根据图表布局调整为flex/grid等对应属性）。

3. 注入CSS到仪表板
   将生成的CSS代码粘贴到仪表板的自定义CSS区域，即可自动隐藏无需展示的图表。

额外提示 #

若仪表板支持模板变量或数据绑定生成CSS，可直接遍历数据集自动生成对应规则，无需手动编写每个QuestionId的样式，提升效率。

内容的提问来源于stack exchange，提问作者GeekyKudosChick24