Workshop中Chart:XY组件的图层显示切换实现方法

1. 创建状态变量存储图层显示状态 #

在Workshop的变量面板中新建一个对象类型变量（比如命名为layerVisibility），用键值对记录每个目标图层的显示状态，键对应图层名称，值为布尔值（true表示显示，false表示隐藏）。示例结构：

{
  "销售额": true,
  "用户量": true,
  "转化率": false
}

2. 配置按钮组组件 #

• 添加按钮组组件，将按钮选项设置为你需要控制的图层名称（比如["销售额", "用户量", "转化率"]）。
• 根据需求开启多选择模式（允许同时显示多个图层）或保持单选模式（仅显示选中的单个图层）。
• 把按钮组的选中值绑定到刚才创建的layerVisibility变量（多选场景），或者绑定到单个字符串变量（比如activeLayer，单选场景）。

3. 关联Chart:XY图层的可见性 #

打开Chart:XY的图层配置面板，针对每个需要控制的图层：

• 在图层的可见性设置中选择「动态绑定」。
• 多选场景下，绑定表达式写为layerVisibility["目标图层名称"]（比如layerVisibility["销售额"]）。
• 单选场景下，绑定表达式写为activeLayer === "目标图层名称"。

4. 补充按钮交互逻辑（可选） #

如果按钮组默认的状态切换逻辑不满足需求，可在按钮组的「点击事件」中添加自定义逻辑：

• 多选场景：点击按钮时切换对应图层的布尔状态

layerVisibility[当前点击的按钮值] = !layerVisibility[当前点击的按钮值]

• 单选场景：点击按钮时直接将activeLayer赋值为当前按钮值即可。

5. 测试验证 #

预览应用，点击按钮组的选项，确认对应图层能同步显示或隐藏，确保状态逻辑正常运行。

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