【仪表板-图表设计】通过外部查询按钮实现仪表板数据过滤

收藏

本帖最后由 Eden.Sun 于 2023-1-5 19:02 编辑

仪表板除过独立访问查看外，很多时候也会被嵌入到业务系统的界面中来使用。
为了确保风格一致或者其他系统页面本身有自己的查询功能，就需要将业务系统或者网页中原有的查询功能作用到通过
iframe嵌入的仪表板中，以实现数据过滤查询。

实现该类场景的核心点是：将外部的查询条件传递给仪表板的参数。
具体可以通过URL传参的方法来实现。

示例效果：
顶部参数面板为业务系统页面；可视化部分为嵌入的仪表板。
image.png758059081.png

具体实现步骤
一.设计仪表板，并在仪表板中添加参数，将参数设置为全局过滤器。
1.设计仪表板,并添加需要传递的参数;
image.png811927795.png

2.将需要作用的参数添加到仪表板过滤器或者队对应图表的过滤条件上;
image.png995437927.png

3.保存预览,在[新窗口]中打开,获取仪表板的独立的URL;
image.png397020873.png

4.获取token,将token拼接到url后面,形成带有用户认证信息的完整URL.
参考:https://help.grapecity.com.cn/pages/viewpage.action?pageId=50021916
URL参数说明:https://help.grapecity.com.cn/pages/viewpage.action?pageId=50022901

5.在示例页面中嵌入仪表板,并处理参数传递机制.
<html>
<head>
</head>
<body>
      <script>
            /*按钮命令传递条件到URL*/
            function pass_para(){
                     var area=document.getElementById("txt_area").value;
                     var zfff=document.getElementById("txt_zfff").value;
                     /*URL字符串根据实际情况替换*/
                     var urlStr="http://localhost:51980/dashboards/view/4dd3a263-fac6-4f6b-8a75-84432c3fffe8?theme=blue&lng=zh&dp={%22area%22:[%22"+
                     area +"%22],%22zfff%22:[%22" + zfff + "%22]}&token=d382dbad586bea998680265744d6bf94ee4a55822623e37b46e4ec6e4c66162b&toolbar=hide"
                     document.getElementById("dashboard").src=urlStr;
            }
      </script>
      <div>
            <div style="background-color:gray;height:60px;">
            <span>
            <label>地区</label>
            <input id="txt_area" style="height:50px;" type="textbox">

            <label>支付方式</label>
            <input id="txt_zfff" style="height:50px;" type="textbox">

            <input type="button" style="height:30px;width:50px;" value="test">
            </span>
            </div>
      </div>
      <br />
      <div>
            <iframe id="dashboard" style="height:100%;width:100%"></iframe>
      </div>
</body>
</html>

可下载附件了解详情.

		自动登录	找回密码
密码			立即注册

[仪表板] 【仪表板-图表设计】通过外部查询按钮实现仪表板数据过滤

0 个回复

微信认证勋章

讲师达人

元老葡萄

悬赏达人