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

Question

我发现 mpld3 这个包非常棒，可以把 matplotlib 的图表导出为 HTML，并通过 flask 应用展示出来。

每次导出都会生成很多 JavaScript 代码，如果你想在同一页面上显示多个图表，这些代码看起来就像是重复的。不过，我对 JavaScript 了解得不够深，不知道怎么提取出相关的部分，然后再循环使用它们。.fig_to_dict 方法可以提供显示每个图表所需的 JSON 数据，但我还是不太清楚需要什么样的 JavaScript 或模板工作来依次显示每个图表。

我考虑过把每个图表堆叠成一个大图，但我想把图表放在不同的 DIV 中，所以这不是个好办法。

我觉得我能看懂 JavaScript 是怎么显示这些图表的，但我没有足够的知识去修改这些函数以满足我的需求。

我没有提供代码，因为我觉得这可能只对有 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>

我原以为只需要在模板头部链接两个核心脚本，然后为每个 JSON 导出创建一个新脚本就可以了。但这对我来说并没有奏效。

Answer 1

请注意，自从jakevdp的回答发布以来，mpld3已经有了新的版本。到今天为止（2014年9月），mpld3的引入方式应该是：

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>

Answer 2

你的回答已经有一半正确了。我觉得你想做的事情大概是这样的，这样可以在页面上嵌入三个图形：

<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>

每个图形的json代码可以通过在Python中运行下面的代码来生成：

import json

# ... create matplotlib figure

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

把这个字符串放到你正在创建的HTML文档的合适位置，就可以了。希望这对你有帮助！