如何使用 mpld3 和烧瓶将 matplotlib 图放入 html 容器中答案

【问题标题】：How to place a matplotlib plot into an html container using mpld3 and flask如何使用 mpld3 和烧瓶将 matplotlib 图放入 html 容器中
【发布时间】：2014-09-08 16:05:48
【问题描述】：

我正在尝试使用 mpld3-flask 示例 (https://github.com/nipunreddevil/mpld3-flask) 作为模板来实现某种行为。我想要的是在标题栏上添加链接到不同的图，而不是有一个单选按钮查询表单。

现在，上面的示例代码在 templates/index.html 中创建了一个容器，然后在用户通过单击“查看绘图”按钮提交查询时使用绘图填充它。据我所知，这发生在 index.html 中的代码中：

$("#query").click(function() {  

  $("#loading-div-background").show();
  $("#container").hide();
  var plot_type = $('input:radio[name=plot_type]:checked').val();
  var qu = {"plot_type":plot_type}
  $.ajax({
    type: "POST",
    async:true,
    contentType: "application/json; charset=utf-8",
    url: "/query",
    data: JSON.stringify(qu),
    success: function (data) {     
     var graph = $("#container");
     graph.html(data);   
     $("#loading-div-background").hide();      
     $("#container").show();
   },
   dataType: "html"
 });
});

我想要的是添加到当前具有“主页”的标题栏中，并在不同的页面中显示每个示例图。我会路由到不同的链接，然后用绘图数据填充模板 html 代码，而不需要用户查询。

我是一个 html 新手，目前对 JavaScript 基本上一无所知。我的感觉这里有一些相对简单的方法可以使用flask + jinja2来做到这一点，但我一直无法弄清楚。

由于组合所有这些语言而产生的那种不明确的命名空间，我遇到了一些麻烦。在我自己的 python 编程中，我通常对命名空间非常严格（即我从来没有使用过'from ____ import *'），所以这让我有点发疯。

【问题讨论】：

标签： python matplotlib flask mpld3

【解决方案1】：

工作了一段时间后，我找到了一个似乎可行并实现我想要的行为的解决方案。请注意，我使用的是 twitter bootstrap css 和 javascript 包。

基本上，我做一个按钮组：

  <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
      <input type="radio" name="options" id="home"> Option 1
  </label>
  <label class="btn btn-primary">
      <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Option 3
  </label>

然后在我使用的 mpld3-flask 示例中的 javascript 中：

$('.btn-primary').on('click', function(){
  var qu = {"plot_type":$(this).find('input').attr('id')}
  $(this).addClass('active').siblings().removeClass('active');
  $.ajax({
    type: "POST",
    async:true,
    contentType: "application/json; charset=utf-8",
    url: "/query",
    data: JSON.stringify(qu),
    success: function (data) {
     var graph = $("#container");
     graph.html(data);
     $("#container").show();
     },
   dataType: "html"
  });  
});

现在我有一个单选按钮栏，当前活动的绘图按钮设置为“活动”，只需单击其中一个按钮即可绘制新绘图。

编辑：在了解了更多关于flask和Jinja2的信息之后，将mpld3生成的html传递给模板也很容易，但是有一个小问题；它看起来像这样

在你的python路由函数的返回中：

return render_template('index.html', plot=mpld3_html)

然后在html模板中你可以引用这个html

{{plot|safe}}

希望这对其他人有所帮助。

【讨论】：