如何将 Apache Superset 图表嵌入到 React 应用程序中答案

【问题标题】：How to embede Apache Superset chart into React app如何将 Apache Superset 图表嵌入到 React 应用程序中
【发布时间】：2022-04-30 04:39:23
【问题描述】：

我想将我的图表从 Apache Superset 嵌入到我的 React.js 应用程序中。到目前为止，我知道有可能这样使用：

<iframe
        id="myIFRAME"
        width="1600"
        height="1200"
        seamless
        frameBorder="10"
        scrolling="no"
        src="http://localhost:8080/r/3"
      >
</iframe>

它工作正常，但我只想使用带有过滤器选项的图表，而没有所有超集仪表板窗格：

我试图使用https://www.npmjs.com/package/@superset-ui/core，但没有很好的文档如何使用它，它需要将 react 版本降级到 16，而我认为在我的项目中会是更好的新版本。

目前我正在尝试通过捕获事物来操纵 iframe 中的事物

var iframe = document.getElementById("myIFRAME");
  var elmnt = iframe.contentWindow.document.getElementsByClassName(
    "dashboard-content css-185d7vi"
  );
   elmnt.style.display = "none";

但我认为这不是一个好方法，我遇到了CORS 和Consider adding an error boundary to your tree to customize error handling behavior. 的错误

【问题讨论】：

标签： javascript reactjs iframe apache-superset

【解决方案1】：

有一个选项可以添加到 iframe 查询属性中，standalone=true..

<iframe
        id="myIFRAME"
        width="1600"
        height="1200"
        seamless
        frameBorder="10"
        scrolling="no"
        src="http://localhost:8080/superset/dashboard/world_health/?standalone=true"
      ></iframe>

【讨论】：

【解决方案2】：

我认为这对您的问题很有帮助。

https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#customizing-dashboard

<iframe
    width="1600"
    height="1600"
    seamless
    frameBorder="0"
    scrolling="yes"
    src="http://127.0.0.1:8088/superset/dashboard/16?standalone=2"
    >
</iframe>

不要从超集中的“复制仪表板 URL”获取 URL。取而代之的是，您可以从浏览器链接地址获取仪表板 URL。在 URL 的末尾只需添加 '?standalone=2'

【讨论】：