Блог

Главная - Вопросы по программированию - Экспорт автономного автономного html-графика фигур matplotlib с использованием mpld3

Экспорт автономного автономного html-графика фигур matplotlib с использованием mpld3

#javascript #html #matplotlib #d3.js #mpld3

#javascript #HTML #matplotlib #d3.js #mpld3

Вопрос:

Я пытаюсь экспортировать фигуры matplotlib с использованием mpld3 в автономные HTML-файлы. Это работает :

 import numpy as np
import matplotlib.pyplot as plt
import mpld3

fig, ax = plt.subplots(1, 1)
ax = ax.plot(np.arange(10))

with open("graph.html", "w") as fileobj:
    mpld3.save_html(plt.gcf(), fileobj)

экспорт действительно происходит, и график отображается, как и ожидалось, когда я открываю html-файл в браузере с подключением к Интернету. Интересно, что он также отображается, как и ожидалось, без подключения к Интернету. Как это возможно, поскольку я ожидаю, что html попытается получить компоненты js (d3 и mpld3) из сетевого cdn?

Во-вторых, я загрузил репозиторий mpld3 и разархивировал содержимое, чтобы иметь локальную копию js d3 и mpld3 здесь. Поэтому я использовал следующее, чтобы попытаться экспортировать html-файл для автономного использования, используя :

 import numpy as np
import matplotlib.pyplot as plt
import mpld3

fig, ax = plt.subplots(1, 1)
ax = ax.plot(np.arange(10))

with open("graph.html", "w") as fileobj:
    mpld3.save_html(plt.gcf(), fileobj,
                    d3_url=r"pathtompld3-mastermpld3jsd3.v5.min.js",
                    mpld3_url=r"pathtompld3-mastermpld3jsmpld3.v0.5.1.min.js",
                    )

согласно документу здесь и здесь. Но при этом HTML-код в браузере отображается пустым. Вот исходный код :

 


<style>

</style>

<div id="fig_el158242311667823952363636180"></div>
<script>
function mpld3_load_lib(url, callback){
  var s = document.createElement('script');
  s.src = url;
  s.async = true;
  s.onreadystatechange = s.onload = callback;
  s.onerror = function(){console.warn("failed to load library "   url);};
  document.getElementsByTagName("head")[0].appendChild(s);
}

if(typeof(mpld3) !== "undefined" amp;amp; mpld3._mpld3IsLoaded){
   // already loaded: just create the figure
   !function(mpld3){
       
       mpld3.draw_figure("fig_el158242311667823952363636180", {"width": 1280.0, "height": 960.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-0.45, 9.45], "ylim": [-0.45, 9.45], "xdomain": [-0.45, 9.45], "ydomain": [-0.45, 9.45], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el158242311667809200", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el158242311667979264", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [1.0, 1.0], [2.0, 2.0], [3.0, 3.0], [4.0, 4.0], [5.0, 5.0], [6.0, 6.0], [7.0, 7.0], [8.0, 8.0], [9.0, 9.0]]}, "id": "el158242311667823952", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
   }(mpld3);
}else if(typeof define === "function" amp;amp; define.amd){
   // require.js is available: use it to load d3/mpld3
   require.config({paths: {d3: "pathtompld3-mastermpld3jsd3.v5.min"}});
   require(["d3"], function(d3){
      window.d3 = d3;
      mpld3_load_lib("pathtompld3-mastermpld3jsmpld3.v0.5.1.min.js", function(){
         
         mpld3.draw_figure("fig_el158242311667823952363636180", {"width": 1280.0, "height": 960.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-0.45, 9.45], "ylim": [-0.45, 9.45], "xdomain": [-0.45, 9.45], "ydomain": [-0.45, 9.45], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el158242311667809200", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el158242311667979264", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [1.0, 1.0], [2.0, 2.0], [3.0, 3.0], [4.0, 4.0], [5.0, 5.0], [6.0, 6.0], [7.0, 7.0], [8.0, 8.0], [9.0, 9.0]]}, "id": "el158242311667823952", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
      });
    });
}else{
    // require.js not available: dynamically load d3 amp; mpld3
    mpld3_load_lib("pathtompld3-mastermpld3jsd3.v5.min.js", function(){
         mpld3_load_lib("pathtompld3-mastermpld3jsmpld3.v0.5.1.min.js", function(){
                 
                 mpld3.draw_figure("fig_el158242311667823952363636180", {"width": 1280.0, "height": 960.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-0.45, 9.45], "ylim": [-0.45, 9.45], "xdomain": [-0.45, 9.45], "ydomain": [-0.45, 9.45], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el158242311667809200", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el158242311667979264", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [1.0, 1.0], [2.0, 2.0], [3.0, 3.0], [4.0, 4.0], [5.0, 5.0], [6.0, 6.0], [7.0, 7.0], [8.0, 8.0], [9.0, 9.0]]}, "id": "el158242311667823952", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
            })
         });
}
</script>

Итак, моя проблема сводится к 2 вопросам :

  • почему первый фрагмент экспортирует html-страницу, которая отображается без подключения к Интернету?
  • почему использование d3_url и mpld3_url нарушает рендеринг html?

python: 3.8 matplotlib: 3.2.1 версия mpldd3: 0.5.1

Ответ №1:

Итак, я выяснил свою основную проблему, касающуюся использования d3_url и mpld3_url : используя эту ссылку и сравнивая исходный код html выше с тем, который сгенерирован на mac, теперь это работает нормально :

 # note the "file:// prefix and the forward slashes
with open("graph.html", "w") as fileobj:
    mpld3.save_html(plt.gcf(), fileobj,
                    d3_url="file://C:/.../mpld3-master/mpld3/js/d3.v5.min.js",
                    mpld3_url="file://C:/.../mpld3-master/mpld3/js/mpld3.v0.5.1.min.js",
                    )

Проблема заключалась в том, что URL-адрес должен быть простой строкой, в которой хранится путь javascript, а не путь python. Отсюда префикс «file://» и косые черты в путях.