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>

我认为这就像从模板标题中链接两个核心脚本然后为每个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>

每个图的json代码都可以通过运行

在Python中创建

import json

# ... create matplotlib figure

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

将此字符串嵌入到您正在创建的HTML文档中的适当位置，您应该很高兴。我希望有所帮助！

Answer 2

请注意，由于jakevdp的答案已经发布，mpld3已经发布了新版本。截至今天（2014年9月），mpld3包括：

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

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

2 个答案: