更新时间:2024-06-17 GMT+08:00
分享

自定义桥接器

操作场景

当需要连接其它数据,以获得组件最佳的展示效果时,可通过自定义数据桥接器实现。自定义桥接器时,需要先下载桥接器模板,根据组件的数据结构,对桥接数据进行对接和改造。

自定义桥接器

  1. 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。
  2. 在AstroCanvas界面的右上角,单击“管理”,进入AstroCanvas管理页面。
  3. 在左侧导航栏中,选择“页面资产管理 > 桥接器模板”。
  4. 在桥接器模板页面中,单击模板bridgeBasicTemplate,进入模板详情页。

    图1 单击桥接器模板

  5. 在桥接器模板详情页,单击“下载”,将模板包下载到本地。
  6. 解压已下载的模板,修改桥接器模型名称。

    桥接器模型名称需要和使用该自定义桥接器的组件中定义的模型名称相同,否则在组件中设置数据源时,桥接器实例无法选择到该桥接器。

    桥接器模型名称可在使用该桥接器的组件中查看。例如,在玫瑰花饼图中使用自定义桥接器,请按照如下操作获取模型名称。

    1. 返回AstroCanvas界面,在主菜单中,选择“我的资产”。
    2. 在左侧导航栏中,选择“我的组件”。
    3. “所有组件”中,查找到玫瑰花饼图,将鼠标放在组件上,单击,将组件下载到本地。
      图2 单击玫瑰花饼图
    4. 解压下载的组件包,在“RosePieChart_Widget.editor.js”中查找模型名称。
      图3 查找模型名

  7. 根据业务需求,设置自定义桥接器中的数据连接逻辑,并将该目录中的所有文件和文件夹打成zip包。
  8. 将开发好的自定义桥接器zip包上传到AstroCanvas中。

    1. 在我的资产中,单击左侧导航栏的“我的桥接器”。
    2. 单击“添加新桥接器”,在“上传源文件”中,选择本地打包好的自定义桥接器包。
    3. 设置发行说明后,单击“提交”。

      在桥接器列表中,可查看到已上传的桥接器。

使用自定义桥接器

  1. 参考创建大屏&PC端项目中操作,创建一个项目。
  2. 项目创建后,参考使用空白画布新建页面中操作,新建一个空白页面。
  3. 进入开发页面,从“全部组件 > 图表”中,拖拽玫瑰花饼图组件到画布中。

    图4 拖拽玫瑰花饼图到画布中

  4. 选中组件,单击组件上方的,进入数据设置页面。
  5. “数据类型”选择“桥接器预置”,在选择桥接器中即可选择到自定义桥接器中自定义的桥接器。

    图5 为组件添加自定义桥接器

分享:

    相关文档

    相关产品