Google 可视化库 Facets：如何将 python 模块“facets”输出 html 离线保存到本地驱动器？

Posted 2023-02-23

【中文标题】Google 可视化库 Facets：如何将 python 模块“facets”输出 html 离线保存到本地驱动器？

【英文标题】：Google Visualization library Facets : How to save python module "facets" output html to local drive offline?

【发布时间】：2019-11-18 02:01:41

【问题描述】：

最近我发现了python可视化库“Facets”，想知道我是否可以离线生成html输出。

我使用的是chrome浏览器，不需要webcomponents-lite.js。 另外，我已经在我的 MacOS 中使用自制软件安装了 bazel。 我已将“facets-dist”文件夹从 facets 官方仓库复制到 jupyter 路径 ~/.ipython/nbextensions/

有用的链接： - https://github.com/PAIR-code/facets - https://colab.research.google.com/github/PAIR-code/facets/blob/master/colab_facets.ipynb

我的尝试：

import numpy as np
import pandas as pd
from IPython.core.display import display, HTML


df = pd.DataFrame('a':[10,20],'b':[100,200])
jsonstr = df.to_json(orient='records')

HTML_TEMPLATE = """<link rel="import" href="/nbextensions/facets-dist/facets-jupyter.html">
        <facets-dive id="elem" ></facets-dive>
        <script>
          var data = jsonstr;
          document.querySelector("#elem").data = data;
        </script>"""

html_str = HTML_TEMPLATE.format(jsonstr=jsonstr)

# write the html to a file
with open('output.html', 'w') as f:
    f.write(html_str)
    #f.write(HTML(html_str).data)

!open output.html

它会创建一些 output.html 文件，但不显示任何可视化。如何创建正确的输出 html？

【问题讨论】：

我不知道该怎么做（并且会对解决方案非常感兴趣！）但是规避问题的一种方法是创建一个笔记本，显示您的变量 HTML_TEMPLATE 并使用 jupyter 命令行jupyter nbconvert --to html facets-dive.ipynb。生成的 html 文件将包含您的可视化。

【参考方案1】：

实际上是可以做到的。您的代码中的问题来自以下几行：

HTML_TEMPLATE = """<link rel="import" href="/nbextensions/facets-dist/facets-jupyter.html">
        <facets-dive id="elem" ></facets-dive>
        <script>
          var data = jsonstr;
          document.querySelector("#elem").data = data;
        </script>"""

你现在应该使用这个HTML_TEMPLATE：

HTML_TEMPLATE = """<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js"></script>
            <link rel="import" href="https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html">
            <facets-dive id="elem" ></facets-dive>
            <script>
              var data = jsonstr;
              document.querySelector("#elem").data = data;
            </script>"""

其余的代码看起来不错