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

Question

我发现这个mpld3包非常出色,可以将matplolib绘图导出为HTML并通过flask应用程序显示.

每个导出都附带了很多JS,如果你想在一个页面中显示多个图表,这似乎是不必要的重复.但是我不熟悉JS以提取相关组件然后循环遍历它们.该.fig_to_dict方法提供了必要的JSON来显示每个图表,但后来我想知道需要JS /模板工作来依次显示每个图表.

我认为只是将每个绘图堆叠成一个大图,但我想将图表布局在单独的DIV中,因此这不是正确的解决方案.

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

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

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

<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文档中的适当位置,您应该很高兴.我希望有所帮助!