本帖最后由 Bella.Yuan 于 2023-1-5 18:31 编辑
本次文档，主要用来解决适合深度集成的客户需要。
客户需求为： 1.通过 API 调用 Wyn 的数据分析服务。 2.获取 Wyn 中所有报表，仪表，在自己项目中可以访问，管理。 3.集成到自己项目中的BI组件，可以实现跟在Wyn中相同的效果。 4.在自己项目中引用 Wyn 中 viz 组件。 根据客户提出的几个深入集成的问题，如果对与Wyn只是会用的阶段。那么实现起来确实有点困难。但是Wyn不仅仅是一个实现报表的软件，更是一套开发工具。只需要我们在使用过程中做几步配置，写点代码，就可以完成以上几个功能。 那么针对客户本次遇到的问题，我们该如何实现呢。话不多说，上步骤。后面会附带源码。不喜欢看文章的直接下载源码。 实现效果为：
第一步：获取Wyn中所有的文档数据，仪表板类型为：dbd。将数据加载到仪表板下拉框中。 $(function() {
fetch("http://localhost:51980/api/graphql?token=c4a0359a5bcca74b98b866e44d543a02bcf7c8a02d723402ee3bcfec6410cad8", {
"method": "POST",
"headers": {
"Content-Type": "application/json",
"Accept": "application/json"
},
"mode": "cors",
"body": "{\"query\":\"query {documents(orderby: \\\"+name\\\") {id,type,title,ext,created,created_by {name, email},modified,modified_by {name,email},effective_ops}}\"}"
}).then(function(res) {
res.json()
.then(function(data) {
var arr = data.data.documents.filter(function(p) {
return p.type == "dbd";
});
arr.forEach((v, i) => {
$("#sel_dbd").append("<option value='" + v.id + "'>" + v.title + "</option>");
});
});
});
});
第二步：给仪表板下拉框增加onchange事件，选择后加载仪表板中所有组件。并将组件名称添加到组件下拉框中。 function loadItem() {
var dbid = $("#sel_dbd").val();
fetch("http://localhost:51980/api/dashboards/" + dbid + "?token=2d64f7f419cc1d829c1d62e9696e19c812730208804fa7da03058541df4ee4ce", {
"method": "get",
"headers": {
"Content-Type": "application/json",
"Accept": "application/json"
},
}).then(function(res) {
res.json()
.then(function(data) {
console.log(data);
$("#sel_item").empty();
data.scenarios.forEach((v, i) => {
$("#sel_item").append("<option value='" + v.name + "'>" + v.name + "</option>");
});
});
});
}
第三步：给组件下拉框增加onchange事件，中间加载仪表板绑定代码，用以div集成。 function loadDivHtml() {
$('#viewer').html('');
var baseUrl = 'http://localhost:51980/';
var token = "25e06d43796485bf0cd9a90f4307dfe9c26e6372f30006696b2792db834f2452";
var viewer = WynBi.create('DashboardViewer', {
edition: 'ZH',
containerFilterScope: '',
version: '1.0.0',
userId: 'anonymous_user',
lng: 'zh',
baseUrl,
token,
"scenario": $("#sel_item").val(),
"dashboardId": $("#sel_dbd").val(),
"token": "25e06d43796485bf0cd9a90f4307dfe9c26e6372f30006696b2792db834f2452",
"size": "fitToScreen",
"actions": "clearselection,focus,annotation,export,filter,clearruntimefilter,sort,rank,convertvisual,options.property.conditionalformat,options.property.referenceline,options.property.trendlines,options.property.expand,showdata,analysispath",
"openfulldashboardmode": "newwindow"
});
viewer.initialize({
container: document.querySelector('#viewer'),
onClose: () => {
console.log('close');
},
onLoaded: (docName) => {
console.log('loaded', docName);
},
});
document.createElement('script')
}
功能源码：
dashboard_0630.zip
(6.78 MB, 下载次数: 3, 售价: 20 金币)
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
支持一下！