[]
        
(Showing Draft Content)

DIV方式集成单个仪表板组件

集成单个组件时,支持 IFrame URL和 Div 两种方式。

有关iFrame 集成组件的介绍,请见URL方式集成仪表板中的单个组件

关于DIV 方式集成单个组件的原理与集成整个仪表板是相同的,仅是在代码中添加了单个组件的控制信息使其最后仅显示固定的组件。

有关仪表板的DIV集成方法,请见DIV方式集成仪表板设计器。本文为您介绍如何获取到单个组件的Div 集成信息。

注意

进行DIV集成之前,需要将系统进行跨域配置,允许跨域请求。例如:

image2021-6-7_17-4-35.png

操作方法

1. 创建完仪表板之后,将仪表板保存。

2. 再次编辑仪表板编辑界面。

3. 单击组件右上角的分享按钮,打开分享组件窗口。如下图。

image2022-10-26_10-18-48.png

4. 在分享窗口选择对组件的配置项,自动生成 DIV 代码。

  • 可选菜单项:设置集成之后的组件显示哪些菜单项。

比如仅选择“筛选” 项目,那么集成之后打开的组件则仅有“筛选”选项。


image2020-11-11_13-57-50.png

  • 大小。配置组件的大小适应方式,默认为适应所在的容器。

    image2022-10-26_10-19-57.png

  • 返回仪表板。配置组件集成之后是否可以返回完整的仪表板,以及以哪种方式打开完整仪表板。

    image2022-10-26_10-20-29.png

    支持重定向新页面三种选项。

    • 代表集成之后的组件不能返回完整仪表板,没有打开完整仪表板的按钮。

    • 重定向新页面代表集成之后的组件会有打开完整仪表板的按钮。

    • 重定向代表在当前页面打开完整仪表板;新页面代表在新的页面打开完整仪表板。

      image2020-11-11_14-52-45.png

  • 文档主题:选择一个应用在该组件的文档主题,以使其嵌入后与目标界面的配色更合适。

    image2022-10-26_10-21-30.png

  • 嵌入到:选择IFrame 或DIV的集成方式。自动生成所需代码。

    image2020-11-11_15-31-12.png

5. 接下来就可以单击复制选项按钮,将自动生成的代码复制出来使用了。


image2020-11-11_16-3-28.png


添加到集成单张仪表板的代码中。

image.png