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

功能概述

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

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

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

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 的文档列表获取。
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 指的是可视化组件的名称，可以在仪表板设计器中获取。

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 的文档列表获取。
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;
    });
}