如何使用mpld3和flask将matplotlib图形放入html容器中

Question

我正尝试使用mpld3-flask示例(https://github.com/nipunreddevil/mpld3-flask)作为模板，以实现一定的行为。我希望在标题栏中添加到不同绘图的链接，而不是具有单选按钮查询表单。

目前，在templates/index.html中的示例代码会创建一个容器，并在用户通过单击“View Plot”按钮提交查询时填充该容器。就我所知，这段代码发生在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 *”），所以这让我有点疯狂。

- Brian Hayden

Answer 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"
  });  
}); 

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

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

在Python路由函数的返回中： return render_template('index.html', plot=mpld3_html) 然后在html模板中，您可以使用以下代码引用此html： {{plot|safe}} 希望这能帮助其他人。

- Brian Hayden