[]
        
在线Demo 免费试用
(Showing Draft Content)

集成数据源/数据集/模型设计器

1. 概述

1.1 功能概述

Wyn 支持将数据源、数据集以及数据模型设计器嵌入到 Web 应用程序的任意 DIV 容器中去,为最终用户提供在线设计这些文档的能力。

2. 操作步骤

2.1 安装最新的集成包

  1. 安装最新的集成包:https://www.npmjs.com/package/@grapecity-software/wyn-integration

    npm install @grapecity-software/wyn-integration

2.2 集成过程

以下根据不同的场景具体介绍集成方法。

2.2.1 集成数据源设计器

  1. Wyn 支持将数据源设计器嵌入到 Web 应用程序的任意 DIV 容器中去,为最终用户提供在线设计更改数据源的能力,集成方法如下:

  • 示例代码:

    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let designer: any = null;
    const createDesigner = (baseUrl, token, title, documentId) => {
        if (designer) {
            designer.destroy();
        }
    
        WynIntegration.createDatasourceDesigner({
            baseUrl: baseUrl,
            token: token,
            language: 'zh',
            siteTitle: title,
            documentId: documentId, //数据源文档ID
        }, '#wyn-root').then(ins => {
            designer = ins;
        });
    }
  • 参数说明:

    • baseURL 指 Wyn 服务器的地址。

    • token 指访问 Wyn 服务器的令牌,在 Wyn 的「系统管理>安全设置>生成令牌」界面生成,token 所代表的用户需要具有创建数据源的权限。具体获取方法,请详见生成令牌

    • theme 指文档主题。

    • language 指画面语言配置。

    • documentId 指数据源文档 Id,可以从 Wyn 的「文档门户>我的分析」中对应的数据源文档列表获取。

      image

      集成已存在的数据源文档效果

      如果文档 Id 为空,则是创建新的数据源

      image

      image

    • 更多的设置参考API文档:datasourcedesignerinitoption

2.2.2 集成数据模型设计器

Wyn 支持将抽取模型设计器和直连模型设计器嵌入到 Web 应用程序的任意 DIV 容器中去,为最终用户提供在线设计更改数据模型的能力,集成方法如下:

  1. 抽取模型设计器

  • 示例代码:

    let designer: any = null;
    const createDesigner = (baseUrl, token, title, documentId) => {
        if (designer) {
            designer.destroy();
        }
    
        WynIntegration.createCacheModeDesigner({
            baseUrl: baseUrl,
            token: token,
            language: 'zh',
            siteTitle: title,
            documentId: documentId //抽取模型文档ID
        }, '#wyn-root').then(ins => {
            designer = ins;
        });
    }
  • 参数说明:

    • baseURL 指 Wyn 服务器的地址。

    • token 指访问 Wyn 服务器的令牌,在 Wyn 的的「系统管理>安全设置>生成令牌」界面生成,token 所代表的用户需要具有创建数据模型的权限。具体获取方法,请详见生成令牌

    • theme 指文档主题。

    • language 指画面语言配置。

    • documentId 指数据模型文档 Id,可以从 Wyn 的「文档门户>我的分析」中对应的数据集文档列表获取。如果文档 Id 为空,则是创建新的数据模型。

      PixPin_2025-07-23_12-02-46

      集成已存在的抽取模型效果

      如果文档 Id 为空,则为创建新的抽取模型

      image

      PixPin_2025-07-23_12-19-45

  1. 直连模型设计器

  • 示例代码:

    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let designer: any = null;
    const createDesigner = (baseUrl, token, title, documentId) => {
        if (designer) {
            designer.destroy();
        }
    
        WynIntegration.createDirectQueryDesigner({
            baseUrl: baseUrl,
            token: token,
            language: 'zh',
            siteTitle: title,
            documentId: documentId //直连模型文档ID
        }, '#wyn-root').then(ins => {
            designer = ins;
        });
    }
  • 参数说明: 请参考上方抽取模型中的介绍。

2.2.3 集成缓存/直连数据集设计器

  1. Wyn 支持将缓存/直连数据集设计器嵌入到 Web 应用程序的任意 DIV 容器中去,为最终用户提供在线设计更改数据集的能力,集成方法如下:

  • 示例代码:

    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let designer: any = null;
    const createDesigner = (baseUrl, token, title, documentId) => {
        if (designer) {
            designer.destroy();
        }
    
        WynIntegration.createDatasetDesigner({
            baseUrl: baseUrl,
            token: token,
            language: 'zh',
            siteTitle: title,
            documentId: documentId, //缓存/直连数据集文档ID
        }, '#wyn-root').then(ins => {
            designer = ins;
        });
    }
  • 参数说明:

    • baseURL 指 Wyn 服务器的地址。

    • token 指访问 Wyn 服务器的令牌,在 Wyn的「系统管理>安全设置>生成令牌」界面生成,token 所代表的用户需要具有创建数据集的权限。具体获取方法,请详见生成令牌

    • theme 指文档主题。

    • language 指画面语言配置。

    • documentId 指数据集文档 Id,可以从 Wyn 的「文档门户>我的分析」中对应的数据集(缓存/直连数据集)文档列表获取。

      image

      集成已存在的数据集效果

      如果文档 Id 为空,则为创建新的数据集

      image

      image

    • 更多的设置参考 API 文档:datasetdesignerinitoption

2.2.4 集成推送数据集和流式数据集设计器

Wyn 支持将推送数据集以及流式数据集设计器嵌入到 Web 应用程序的任意 DIV 容器中去,为最终用户提供在线设计更改数据集的能力,集成方法如下:

  1. 推送数据集

  • 示例代码:

    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let designer: any = null;
    const createDesigner = (baseUrl, token, title) => {
        if (designer) {
            designer.destroy();
        }
    
        WynIntegration.createPushDatasetDesigner({
            baseUrl: baseUrl,
            token: token,
            language: 'zh',
            siteTitle: title,
            documentId: documentId, //推送数据集文档ID
        }, '#wyn-root').then(ins => {
            designer = ins;
        });
    }
  • 参数说明:

    • baseURL 指 Wyn 服务器的地址。

    • token 指访问 Wyn 服务器的令牌,在 Wyn 的的「系统管理>安全设置>生成令牌」界面生成,token 所代表的用户需要具有创建仪表板的权限。具体获取方法,请详见生成令牌

    • theme 指文档主题。

    • language 指画面语言配置。

    • documentId 指数据集文档 Id,可以从 Wyn 的「文档门户>我的分析」中对应的数据集(推送数据集)文档列表获取。如果文档 Id 为空,则是创建新的数据集。

      PixPin_2025-07-23_12-25-14

      集成已存在的推送数据集效果

      如果文档 Id 为空,则为创建新的推送数据集

      PixPin_2025-07-23_12-27-46

      PixPin_2025-07-23_12-28-26

  1. 流式数据集

  • 示例代码:

    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let designer: any = null;
    const createDesigner = (baseUrl, token, title) => {
        if (designer) {
            designer.destroy();
        }
    
        WynIntegration.createStreamingDatasetDesigner({
            baseUrl: baseUrl,
            token: token,
            language: 'zh',
            siteTitle: title,
        }, '#wyn-root').then(ins => {
            designer = ins;
        });
    }
  • 参数说明请参考上方推送数据集中的介绍。