Как поместить график matplotlib в HTML-контейнер с помощью mpld3 и flask

Я пытаюсь использовать пример mpld3-flask (https://github.com/nipunreddevil/mpld3-flask ) как шаблон для достижения определенного поведения. То, что я хотел бы, это добавить ссылки в строке заголовка на различные участки, а не иметь форму запроса с переключателем.



Прямо сейчас, пример кода выше, в шаблонах / индексе.html, создает контейнер и затем заполняет его диаграммой, когда пользователь отправляет запрос, нажав кнопку "Просмотреть диаграмму". Что и происходит в этом коде, пока насколько я могу судить, в индексе.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"

 });

});


Вместо этого я хотел бы добавить в строку заголовка, которая в настоящее время имеет "Home", и вывести каждый пример сюжета на отдельной странице. Я бы направился к другой ссылке, а затем заполнил шаблон html-кода данными для графика, не требуя запроса пользователя.



Я немного новичок в html и практически ничего не знаю о JavaScript на данный момент. Мое чувство здесь заключается в том, что существует относительно простой способ используйте для этого flask + jinja2, но я не смог этого понять.



У меня возникли некоторые проблемы с неясными пространствами имен, которые возникают в результате объединения всех этих языков. Я обычно очень строг с пространствами имен в моем собственном программировании на python (т. е. я никогда, никогда не использую " from _ _ _ import*"), поэтому это немного сводит меня с ума.

761   1  

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>

Затем в javascript из примера mpld3-flask я использую: 

$('.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"
  });  
});

Теперь у меня есть панель радиокнопок, с текущей активной кнопкой plot, установленной в 'active', которая требует только одного нажатия на одну из кнопок, чтобы нарисовать новый участок.

EDIT: узнав больше о flask и Jinja2, также легко передать сгенерированный mpld3 html в шаблон a, но есть небольшая ошибка; это выглядит примерно так

При возврате функции маршрутизации python:

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

Затем в шаблоне html вы можете ссылаться на этот html с помощью

{{plot|safe}}

Надеюсь, что это помогает кто-то другой.

4  
2014-09-20 23:51:44

Comments

    Ничего не найдено.
Click here to cancel reply.