metabase嵌入页面教程（java，html）

最新推荐文章于 2024-06-20 09:39:36 发布

Jarbein

最新推荐文章于 2024-06-20 09:39:36 发布

阅读量6.4k

点赞数 9

分类专栏：工具使用文章标签： java bi

本文链接：https://blog.csdn.net/Jarbein/article/details/103702052

版权

工具同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

使用

8 篇文章 1 订阅

订阅专栏

此教程详细讲解metabase是如何嵌入页面的，并列出示例代码展示（后台是java）
本教程是在会使用metabase控制台前提下进行，如果不知道metabase是如何使用的，请看我这篇文章：metabase使用教程
我们首先通过控制台打开嵌入功能
在这里插入图片描述

一，嵌入仪表盘

首先进入到自己要嵌入的仪表盘的页面，点击红框中的按钮：
在这里插入图片描述
点击后选择第三个：

然后进入如下页面，图中我注释的都是很重要的，这里虽然是python语言，但红框里的东西在java后台一样需要注意，后边嵌入问题中不再详解，如果没有发布，我们需要先点击上方的发布，这样我们的客户端操作就完成了，剩下的就是代码实现了，代码见最后，下边注释中的仪表盘编号是表示你要拿的哪个仪表盘，每个仪表盘都有自己的编号
在这里插入图片描述

二，嵌入问题

问题也就是仪表盘中的单个图表，我们点击进入到自己要嵌入的问题页面，点击右下角分享按钮
在这里插入图片描述
剩下的操作和仪表盘一样，不再详细介绍，注意下图和上边仪表盘时的注释部分的不同

三，代码测试

java后端代码

下边是java后台需要给前端传递url，使前端进行嵌入，
注意：

好好看注释
下边分别是分享仪表盘和问题的url，实现可能稍微不同，但都可以
由于是举例，所以我这里边的仪表盘编号和问题编号是硬编码（也就是这两个接口只能传固定的仪表盘和问题），如果实际中建议前端传编号过来，然后编号作为变量来确定返回哪个编号的仪表盘或者问题

import org.springframework.security.jwt.Jwt;
import org.springframework.security.jwt.JwtHelper;
import org.springframework.security.jwt.crypto.sign.MacSigner;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@RestController
@RequestMapping("/dashboard")
public class MetabaseController2 {
    private final String METABASE_SITE_URL = "http://ip:3000";  //你的metabase所处ip地址，metabase默认端口号3000
    private final String METABASE_SECRET_KEY = "";  //秘匙

    @GetMapping("/dashurl")
    public DashboardParams dashAction() {
        int round = Math.round(System.currentTimeMillis() / 1000)+10*60; // 10 minute expiration
        String pyload = "{\n" +
                "  \"resource\": {\"dashboard\": 1},\n" +  //这个地方要写自己分享的编号
                "  \"params\": {\n" +
                "    \n" +
                "  },\n" +
                "  \"exp\":"+ round + "\n" +   //如果不需要过期时间，这一行可以注释掉
                "}";

        Jwt token = JwtHelper.encode(pyload, new MacSigner(METABASE_SECRET_KEY));
        //注意下边地址中分享仪表盘和question的区别
        String url = METABASE_SITE_URL + "/embed/dashboard/" + token.getEncoded() + "#bordered=true&titled=true";
        return new DashboardParams(url);
    }

    @GetMapping("/questionurl")
    public DashboardParams questionAction() {
        //因为分享的是问题，所以下边resource中的是question，而不是dashboard，同时注意编号的改变
        Jwt token = JwtHelper.encode("{\"resource\": {\"question\": 65}, \"params\": {}}", new MacSigner(METABASE_SECRET_KEY));
        String url = METABASE_SITE_URL + "/embed/question/" + token.getEncoded() + "#bordered=true&titled=true";
        return new DashboardParams(url);
    }


    class DashboardParams {
        private String url;

        public DashboardParams(String url) {
            this.url = url;
        }

        public String getUrl() {
            return url;
        }

        public void setUrl(String url) {
            this.url = url;
        }
    }
}

前端代码

<!DOCTYPE html>
<html>
<head lang="ch">
	<meta charset="UTF-8">
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

</head>

<body>
<h2>仪表盘，问题嵌入演示</h2>

<button id="dashboardbutton">点我看仪表盘</button>
<button id="questionbutton">点我看问题</button>
<br/>
<iframe id="dashboard" 
    src=""
    frameborder="0"
    width="1000"
    height="600"
    allowtransparency
></iframe>
<iframe id="question" 
    src=""
    frameborder="0"
    width="1000"
    height="600"
    allowtransparency
></iframe>
</body>
<script>

// $(document).ready(function(){
  $("#dashboardbutton").click(function(){
        //同步数据
            $.ajax({
                url: "http://ip:端口号" + "/dashboard/dashurl",  //是java后台ip，而不是metabase所处服务器
                type: 'GET',
                // cache: false,
                processData: false,
                contentType: false,
                async: false,
                // dataType:"json",
                success: function (data) {
                	alert(data.url);
                    $("#dashboard").attr("src",data.url);
                },
                error: function (data) {
                    alert("出现异常！");
                }
            });
  });
  
  $("#questionbutton").click(function(){
        //同步数据
            $.ajax({
                url: "http://ip:端口号" + "/dashboard/questionurl",
                type: 'GET',
                // cache: false,
                processData: false,
                contentType: false,
                async: false,
                // dataType:"json",
                success: function (data) {
                	alert(data.url);
                    $("#question").attr("src",data.url);
                },
                error: function (data) {
                    alert("出现异常！");
                }
            });
  });
//});
</script>
</html>

效果展示

在这里插入图片描述

Jarbein

关注

9
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
metabase嵌入页面教程（java，html）

此教程详细讲解metabase是如何嵌入页面的，并列出示例代码展示（后台是java）本教程是在会使用metabase控制台前提下进行，如果不知道metabase是如何使用的，请看我这篇文章：metabase使用教程我们首先通过控制台打开嵌入功能一，嵌入仪表盘首先进入到自己要嵌入的仪表盘的页面，点击红框中的按钮：点击后选择第三个：然后进入如下页面，图中我注释的都是很重要的，这里虽然...
复制链接

扫一扫