[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de62ec1c-813e-40b1-8160-a4cd109afe64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

集成仪表板以及可视化组件

功能概述

用户可以把整张仪表板嵌入到 Web 应用程序的 DIV 容器中去,实现嵌入式的数据分析。

Wyn 提供了两种仪表板查看器:标准分析查看器和高级分析查看器。高级分析查看器提供了更多自助式分析的功能,而标准分析查看器更适用于大屏展示,性能更优。两种查看器的详细差异请参见标准分析模式&高级分析模式

两种仪表板查看器均提供了DIV 的集成方式,集成方法如下:

安装最新的集成包

https://www.npmjs.com/package/@grapecity-software/wyn-integration

npm install @grapecity-software/wyn-integration

集成过程

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

1. 集成仪表板标准查看器

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createViewerLite({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId,
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数说明:

  • baseURL 指的是 Wyn 服务器的地址。

  • token 指的是访问 Wyn 服务器的令牌,在 Wyn 的管理后台生成,token 所代表的用户需要具有查看该仪表板的权限。具体获取方法,请详见生成令牌

  • defaults 用来配置标准查看器的默认配置项,详细的项目参见 dashboardliteviewerdefaults

  • features 用来配置标准查看器的功能配置项,详细的项目参见:dashboardliteviewerfeatures

  • dashboardId 指的是仪表板文档 Id,可以从Wyn 的文档列表获取。

    image

  • createViewerLite 异步 then 方法返回的 instance 对象,是创建完成的仪表板标准查看器实例对象,实例对象的接口参见文档:dashboard.DashboardLiteViewer


2. 集成可视化组件(仪表板标准查看器)

一些应用场景下,用户希望将单个的可视化组件集成到应用程序,而不是整张仪表板。这个时候在集成仪表板查看器代码的基础上,只需要指定可视化组件的名称即可。

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createViewerLite({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId,
            scenario: "picture-2"
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数 scenario 指的是可视化组件的名称,可以在仪表板设计器中获取。

image

3. 集成仪表板高级查看器

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createDashboardViewer({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId,
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数说明:

  • baseURL 指的是 Wyn 服务器的地址。

  • token 指的是访问 Wyn 服务器的令牌,在 Wyn 的后台管理生成,token 所代表的用户需要具有查看该仪表板的权限。具体获取方法,请详见生成令牌

  • defaults 用来配置高级查看器的默认配置项,详细的项目参见:dashboardviewerdefaults

  • dashboardId 指的是仪表板文档 Id,可以从 Wyn 的文档列表获取。

    image


  • features 用来配置高级查看器的功能配置项,详细的项目参见:dashboardviewerfeatures

  • “wyn-root” 指的是嵌入到 HTML DIV 容器的Id。

  • createDashboardViewer 异步 then 方法返回的 instance 对象,是创建完成的仪表板高级查看器实例对象,实例对象的接口参见文档:dashboard.DashboardViewer

4. 集成可视化组件(仪表板高级查看器)

一些应用场景下,用户希望将单个的可视化组件集成到应用程序,而不是整张仪表板,这个时候在集成仪表板查看器代码的基础上,只需要指定可视化组件的名称。

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createDashboardViewer({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId,
            scenario: "picture-2"
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数 scenario 指的是可视化组件的名称,可以在仪表板设计器中获取。

image

完整示例包下载

wyn-integration-react.zip

wyn-integration-vue.zip