跳至主要內容

内容格式器

2025年1月17日大约 1 分钟

内容格式器 2024.5+

图表内容格式器输入框中可以通过 HETU 获取变量值。

内容格式器使用变量值

该案例演示了柱状图如何使用内容格式器获取变量并导入自身图表配置。

步骤一: 变量池中添加变量

  1. 新建大屏,在右侧边栏中点击编辑变量按钮。

  2. 在变量池中点击+添加一个变量,取名为a

步骤二: 按钮组绑定变量

从左侧边栏文字页签中拖拽按钮组组件到设计器中,在右侧边栏交互页签下将切换按钮组事件勾选启用,字段设置为text,绑定到变量设置为a

步骤三: 内容格式器中使用变量

从左侧边栏中拖入柱状图组件到画布中,右侧边栏切换到系列页签,设置系列1普通状态下的文本标签,显示勾选,内容格式器使用回调函数的方式返回值。

return HETU.getInteractVar('a');

步骤四: 变量导入图表配置

  1. 保存设计器内容,点击节点编程按钮进入节点编程设计器。

  2. 从左侧边栏中拖拽监听变量节点到画布,选中该节点,并在右侧边栏的变量列表中a

  3. 从左侧边栏中拖拽转换器节点到画布,选中该节点,并修改右侧边栏的转换代码;同时使用连线连接监听变量节点和转换器节点。

    return {};
  4. 从左侧边栏中拖拽柱状图节点到画布,点击右侧按钮为节点添加导入图表配置的动作;然后使用连线连接转换器节点和柱状图的导入图表配置动作,点击右上角保存按钮,保存节点编程。

步骤五: 预览效果

进入预览页,发现按钮组切换时系列 1 的文本数据跟随按钮名发生了变化。

上次编辑于: 2025/2/27 15:53:59
贡献者: guohuizheng,xuch