python - 在单个 HTML 页面上显示多个 mpld3 导出

Question

我发现 mpld3 包非常适合将 matplolib 绘图导出到 HTML 并通过 flask 应用程序显示它。

每次导出都带有大量 JS，如果您想在单个页面中显示多个图，这似乎是不必要的重复。但是我不太精通 JS，无法提取相关组件然后循环遍历它们。 .fig_to_dict 方法提供了显示每个图表所需的 JSON，但我想知道依次显示每个图表需要哪些 JS/模板工作。

我考虑过将每个图堆叠成一个大图，但我想将图表布局在单独的 DIV 中，因此这不是正确的解决方案。

我想我可以看到 JS 正在做什么来显示它们，但我没有足够的知识来修改函数以适应目的。

我没有包含代码，因为我希望这只与具有 mpld3 经验的人相关，但如果需要可以提供一些示例代码。

mpld3.fig_to_html(fig, template_type="simple") 的示例 HTML 输出:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script>
<style>
</style>
<div id="fig136845463888164451663379"></div>
<script type="text/javascript">
  var spec136845463888164451663379 = { <snip JSON code> };
  var fig136845463888164451663379 = mpld3.draw_figure("fig136845463888164451663379", spec136845463888164451663379);
</script>

我原以为这会很简单，只需从模板 header 链接两个核心脚本，然后为每个 JSON 导出创建一个新脚本。但这对我不起作用。

Answer 1

您的答案已完成一半。我想你想要做的是这样的，它会在页面上嵌入三个数字:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script>
<style>
</style>
<div id="fig01"></div>
<div id="fig02"></div>
<div id="fig03"></div>
<script type="text/javascript">
  var json01 = { <snip JSON code> };
  var json02 = { <snip JSON code> };
  var json03 = { <snip JSON code> };
  mpld3.draw_figure("fig01", json01);
  mpld3.draw_figure("fig02", json02);
  mpld3.draw_figure("fig03", json03);
</script>

可以通过运行在 Python 中创建每个图形的 json 代码

import json

# ... create matplotlib figure

json01 = json.dumps(mpld3.fig_to_dict(fig))

将此字符串嵌入到您正在创建的 HTML 文档中的适当位置，您就可以开始了。希望对您有所帮助!