javascript - mpld3 生成的 html 图例中缺少 xticklabels 和颜色

Question

我只是在使用 matplotlib 示例 here并使用 mpld3 将其写成 html。

但是，使用 mpld3 生成的 html 缺少图例中的 xticklabels 和颜色。如果我在不转换为 html 的情况下生成绘图，它可以使用 xticklabels 生成，并且在图例中包含颜色。它通过 mpld3 生成的 html 缺少这些项目。

直接用pyplot生成的图如下:

通过mpld3生成的html如下:

<style>

</style>

<div id="fig_el6472544878215208536180784"></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" && mpld3._mpld3IsLoaded){
   // already loaded: just create the figure
   !function(mpld3){
       
       mpld3.draw_figure("fig_el6472544878215208536180784", {"axes": [{"xlim": [0.0, 5.0], "yscale": "linear", "axesbg": "#FFFFFF", "texts": [{"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "20", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.175, 21.0], "rotation": -0.0, "id": "el647254488090960"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "35", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [1.175, 36.75], "rotation": -0.0, "id": "el647254488091792"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "30", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [2.175, 31.5], "rotation": -0.0, "id": "el647254488092880"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "35", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [3.175, 36.75], "rotation": -0.0, "id": "el647254488098128"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "27", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [4.175, 28.35], "rotation": -0.0, "id": "el647254488078096"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "25", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.5249999999999999, 26.25], "rotation": -0.0, "id": "el647254488071312"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "32", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [1.5250000000000001, 33.6], "rotation": -0.0, "id": "el647254488100112"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "34", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [2.525, 35.7], "rotation": -0.0, "id": "el647254488101200"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "20", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [3.525, 21.0], "rotation": -0.0, "id": "el647254571107792"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "25", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [4.5249999999999995, 26.25], "rotation": -0.0, "id": "el647254571108880"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Scores", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [-0.066910282258064516, 0.5], "rotation": -90.0, "id": "el647254487888336"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Scores by group and gender", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.5, 1.0144675925925926], "rotation": -0.0, "id": "el647254487951120"}, {"v_baseline": "auto", "h_anchor": "start", "color": "#000000", "text": "Men", "coordinates": "axes", "zorder": 1000003.0, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.85283518145161274, 0.93124999999999991], "rotation": -0.0, "id": "el647254488079824"}, {"v_baseline": "auto", "h_anchor": "start", "color": "#000000", "text": "Women", "coordinates": "axes", "zorder": 1000003.0, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.85283518145161274, 0.87135416666666654], "rotation": -0.0, "id": "el647254488080528"}], "zoomable": true, "images": [], "xdomain": [0.0, 5.0], "ylim": [0.0, 100.0], "paths": [{"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data01", "id": "el647254487990480"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data02", "id": "el647254488008592"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data03", "id": "el647254488010256"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data02", "id": "el647254488011536"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data04", "id": "el647254488017744"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data05", "id": "el647254488019408"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data06", "id": "el647254488037584"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data07", "id": "el647254488039248"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data01", "id": "el647254488049168"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data05", "id": "el647254488050832"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data08", "id": "el647254488080272"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 2, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data08", "id": "el647254488089680"}, {"edgecolor": "#000000", "facecolor": "#FFFFFF", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data09", "id": "el647254488079440"}], "sharey": [], "sharex": [], "axesbgalpha": null, "axes": [{"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "bottom", "nticks": 5, "tickvalues": [0.34999999999999998, 1.3500000000000001, 2.3500000000000001, 3.3500000000000001, 4.3499999999999996]}, {"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "left", "nticks": 6, "tickvalues": null}], "lines": [], "markers": [], "id": "el647254487821392", "ydomain": [0.0, 100.0], "collections": [], "xscale": "linear", "bbox": [0.125, 0.099999999999999978, 0.77500000000000002, 0.80000000000000004]}], "height": 480.0, "width": 640.0, "plugins": [{"type": "reset"}, {"enabled": false, "button": true, "type": "zoom"}, {"enabled": false, "button": true, "type": "boxzoom"}], "data": {"data08": [[0.7625126008064516, 0.9312499999999999, 0.8713541666666665], [0.8270287298387096, 0.9312499999999999, 0.8713541666666665], [0.8270287298387096, 0.9604166666666666, 0.9005208333333332], [0.7625126008064516, 0.9604166666666666, 0.9005208333333332]], "data09": [[0.7496093749999999, 0.8468749999999999], [0.9838709677419354, 0.8468749999999999], [0.9838709677419354, 0.9791666666666665], [0.7496093749999999, 0.9791666666666665], [0.7496093749999999, 0.8468749999999999]], "data06": [[1.35, 0.0], [1.7000000000000002, 0.0], [1.7000000000000002, 32.0], [1.35, 32.0]], "data07": [[2.35, 0.0], [2.7, 0.0], [2.7, 34.0], [2.35, 34.0]], "data04": [[4.0, 0.0], [4.35, 0.0], [4.35, 27.0], [4.0, 27.0]], "data05": [[0.35, 0.0, 4.35], [0.7, 0.0, 4.699999999999999], [0.7, 25.0, 4.699999999999999], [0.35, 25.0, 4.35]], "data02": [[1.0, 0.0, 3.0], [1.35, 0.0, 3.35], [1.35, 35.0, 3.35], [1.0, 35.0, 3.0]], "data03": [[2.0, 0.0], [2.35, 0.0], [2.35, 30.0], [2.0, 30.0]], "data01": [[0.0, 0.0, 3.35], [0.35, 0.0, 3.7], [0.35, 20.0, 3.7], [0.0, 20.0, 3.35]]}, "id": "el647254487821520"});
   }(mpld3);
}else if(typeof define === "function" && define.amd){
   // require.js is available: use it to load d3/mpld3
   require.config({paths: {d3: "https://mpld3.github.io/js/d3.v3.min"}});
   require(["d3"], function(d3){
      window.d3 = d3;
      mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.2.js", function(){
         
         mpld3.draw_figure("fig_el6472544878215208536180784", {"axes": [{"xlim": [0.0, 5.0], "yscale": "linear", "axesbg": "#FFFFFF", "texts": [{"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "20", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.175, 21.0], "rotation": -0.0, "id": "el647254488090960"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "35", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [1.175, 36.75], "rotation": -0.0, "id": "el647254488091792"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "30", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [2.175, 31.5], "rotation": -0.0, "id": "el647254488092880"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "35", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [3.175, 36.75], "rotation": -0.0, "id": "el647254488098128"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "27", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [4.175, 28.35], "rotation": -0.0, "id": "el647254488078096"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "25", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.5249999999999999, 26.25], "rotation": -0.0, "id": "el647254488071312"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "32", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [1.5250000000000001, 33.6], "rotation": -0.0, "id": "el647254488100112"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "34", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [2.525, 35.7], "rotation": -0.0, "id": "el647254488101200"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "20", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [3.525, 21.0], "rotation": -0.0, "id": "el647254571107792"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "25", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [4.5249999999999995, 26.25], "rotation": -0.0, "id": "el647254571108880"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Scores", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [-0.066910282258064516, 0.5], "rotation": -90.0, "id": "el647254487888336"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Scores by group and gender", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.5, 1.0144675925925926], "rotation": -0.0, "id": "el647254487951120"}, {"v_baseline": "auto", "h_anchor": "start", "color": "#000000", "text": "Men", "coordinates": "axes", "zorder": 1000003.0, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.85283518145161274, 0.93124999999999991], "rotation": -0.0, "id": "el647254488079824"}, {"v_baseline": "auto", "h_anchor": "start", "color": "#000000", "text": "Women", "coordinates": "axes", "zorder": 1000003.0, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.85283518145161274, 0.87135416666666654], "rotation": -0.0, "id": "el647254488080528"}], "zoomable": true, "images": [], "xdomain": [0.0, 5.0], "ylim": [0.0, 100.0], "paths": [{"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data01", "id": "el647254487990480"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data02", "id": "el647254488008592"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data03", "id": "el647254488010256"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data02", "id": "el647254488011536"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data04", "id": "el647254488017744"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data05", "id": "el647254488019408"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data06", "id": "el647254488037584"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data07", "id": "el647254488039248"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data01", "id": "el647254488049168"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data05", "id": "el647254488050832"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data08", "id": "el647254488080272"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 2, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data08", "id": "el647254488089680"}, {"edgecolor": "#000000", "facecolor": "#FFFFFF", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data09", "id": "el647254488079440"}], "sharey": [], "sharex": [], "axesbgalpha": null, "axes": [{"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "bottom", "nticks": 5, "tickvalues": [0.34999999999999998, 1.3500000000000001, 2.3500000000000001, 3.3500000000000001, 4.3499999999999996]}, {"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "left", "nticks": 6, "tickvalues": null}], "lines": [], "markers": [], "id": "el647254487821392", "ydomain": [0.0, 100.0], "collections": [], "xscale": "linear", "bbox": [0.125, 0.099999999999999978, 0.77500000000000002, 0.80000000000000004]}], "height": 480.0, "width": 640.0, "plugins": [{"type": "reset"}, {"enabled": false, "button": true, "type": "zoom"}, {"enabled": false, "button": true, "type": "boxzoom"}], "data": {"data08": [[0.7625126008064516, 0.9312499999999999, 0.8713541666666665], [0.8270287298387096, 0.9312499999999999, 0.8713541666666665], [0.8270287298387096, 0.9604166666666666, 0.9005208333333332], [0.7625126008064516, 0.9604166666666666, 0.9005208333333332]], "data09": [[0.7496093749999999, 0.8468749999999999], [0.9838709677419354, 0.8468749999999999], [0.9838709677419354, 0.9791666666666665], [0.7496093749999999, 0.9791666666666665], [0.7496093749999999, 0.8468749999999999]], "data06": [[1.35, 0.0], [1.7000000000000002, 0.0], [1.7000000000000002, 32.0], [1.35, 32.0]], "data07": [[2.35, 0.0], [2.7, 0.0], [2.7, 34.0], [2.35, 34.0]], "data04": [[4.0, 0.0], [4.35, 0.0], [4.35, 27.0], [4.0, 27.0]], "data05": [[0.35, 0.0, 4.35], [0.7, 0.0, 4.699999999999999], [0.7, 25.0, 4.699999999999999], [0.35, 25.0, 4.35]], "data02": [[1.0, 0.0, 3.0], [1.35, 0.0, 3.35], [1.35, 35.0, 3.35], [1.0, 35.0, 3.0]], "data03": [[2.0, 0.0], [2.35, 0.0], [2.35, 30.0], [2.0, 30.0]], "data01": [[0.0, 0.0, 3.35], [0.35, 0.0, 3.7], [0.35, 20.0, 3.7], [0.0, 20.0, 3.35]]}, "id": "el647254487821520"});
      });
    });
}else{
    // require.js not available: dynamically load d3 & mpld3
    mpld3_load_lib("https://mpld3.github.io/js/d3.v3.min.js", function(){
         mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.2.js", function(){
                 
                 mpld3.draw_figure("fig_el6472544878215208536180784", {"axes": [{"xlim": [0.0, 5.0], "yscale": "linear", "axesbg": "#FFFFFF", "texts": [{"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "20", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.175, 21.0], "rotation": -0.0, "id": "el647254488090960"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "35", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [1.175, 36.75], "rotation": -0.0, "id": "el647254488091792"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "30", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [2.175, 31.5], "rotation": -0.0, "id": "el647254488092880"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "35", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [3.175, 36.75], "rotation": -0.0, "id": "el647254488098128"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "27", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [4.175, 28.35], "rotation": -0.0, "id": "el647254488078096"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "25", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.5249999999999999, 26.25], "rotation": -0.0, "id": "el647254488071312"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "32", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [1.5250000000000001, 33.6], "rotation": -0.0, "id": "el647254488100112"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "34", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [2.525, 35.7], "rotation": -0.0, "id": "el647254488101200"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "20", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [3.525, 21.0], "rotation": -0.0, "id": "el647254571107792"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "25", "coordinates": "data", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [4.5249999999999995, 26.25], "rotation": -0.0, "id": "el647254571108880"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Scores", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [-0.066910282258064516, 0.5], "rotation": -90.0, "id": "el647254487888336"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Scores by group and gender", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.5, 1.0144675925925926], "rotation": -0.0, "id": "el647254487951120"}, {"v_baseline": "auto", "h_anchor": "start", "color": "#000000", "text": "Men", "coordinates": "axes", "zorder": 1000003.0, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.85283518145161274, 0.93124999999999991], "rotation": -0.0, "id": "el647254488079824"}, {"v_baseline": "auto", "h_anchor": "start", "color": "#000000", "text": "Women", "coordinates": "axes", "zorder": 1000003.0, "alpha": 1, "fontsize": 14.399999999999999, "position": [0.85283518145161274, 0.87135416666666654], "rotation": -0.0, "id": "el647254488080528"}], "zoomable": true, "images": [], "xdomain": [0.0, 5.0], "ylim": [0.0, 100.0], "paths": [{"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data01", "id": "el647254487990480"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data02", "id": "el647254488008592"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data03", "id": "el647254488010256"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data02", "id": "el647254488011536"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data04", "id": "el647254488017744"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data05", "id": "el647254488019408"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data06", "id": "el647254488037584"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 0, "data": "data07", "id": "el647254488039248"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data01", "id": "el647254488049168"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "data", "dasharray": "10,0", "zorder": 1, "alpha": 1, "xindex": 2, "data": "data05", "id": "el647254488050832"}, {"edgecolor": "#000000", "facecolor": "#FF0000", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data08", "id": "el647254488080272"}, {"edgecolor": "#000000", "facecolor": "#BFBF00", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "Z"], "yindex": 2, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data08", "id": "el647254488089680"}, {"edgecolor": "#000000", "facecolor": "#FFFFFF", "edgewidth": 1.0, "pathcodes": ["M", "L", "L", "L", "L", "Z"], "yindex": 1, "coordinates": "axes", "dasharray": "10,0", "zorder": 1000001.0, "alpha": 1, "xindex": 0, "data": "data09", "id": "el647254488079440"}], "sharey": [], "sharex": [], "axesbgalpha": null, "axes": [{"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "bottom", "nticks": 5, "tickvalues": [0.34999999999999998, 1.3500000000000001, 2.3500000000000001, 3.3500000000000001, 4.3499999999999996]}, {"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "left", "nticks": 6, "tickvalues": null}], "lines": [], "markers": [], "id": "el647254487821392", "ydomain": [0.0, 100.0], "collections": [], "xscale": "linear", "bbox": [0.125, 0.099999999999999978, 0.77500000000000002, 0.80000000000000004]}], "height": 480.0, "width": 640.0, "plugins": [{"type": "reset"}, {"enabled": false, "button": true, "type": "zoom"}, {"enabled": false, "button": true, "type": "boxzoom"}], "data": {"data08": [[0.7625126008064516, 0.9312499999999999, 0.8713541666666665], [0.8270287298387096, 0.9312499999999999, 0.8713541666666665], [0.8270287298387096, 0.9604166666666666, 0.9005208333333332], [0.7625126008064516, 0.9604166666666666, 0.9005208333333332]], "data09": [[0.7496093749999999, 0.8468749999999999], [0.9838709677419354, 0.8468749999999999], [0.9838709677419354, 0.9791666666666665], [0.7496093749999999, 0.9791666666666665], [0.7496093749999999, 0.8468749999999999]], "data06": [[1.35, 0.0], [1.7000000000000002, 0.0], [1.7000000000000002, 32.0], [1.35, 32.0]], "data07": [[2.35, 0.0], [2.7, 0.0], [2.7, 34.0], [2.35, 34.0]], "data04": [[4.0, 0.0], [4.35, 0.0], [4.35, 27.0], [4.0, 27.0]], "data05": [[0.35, 0.0, 4.35], [0.7, 0.0, 4.699999999999999], [0.7, 25.0, 4.699999999999999], [0.35, 25.0, 4.35]], "data02": [[1.0, 0.0, 3.0], [1.35, 0.0, 3.35], [1.35, 35.0, 3.35], [1.0, 35.0, 3.0]], "data03": [[2.0, 0.0], [2.35, 0.0], [2.35, 30.0], [2.0, 30.0]], "data01": [[0.0, 0.0, 3.35], [0.35, 0.0, 3.7], [0.35, 20.0, 3.7], [0.0, 20.0, 3.35]]}, "id": "el647254487821520"});
            })
         });
}
</script>

有什么办法可以解决这个问题吗？这是 mpld3 错误吗？

这是我使用的 python 代码:

    #!/usr/bin/env python
# a bar plot with errorbars
import numpy as np
import matplotlib.pyplot as plt
import mpld3

N = 5
menMeans = (20, 35, 30, 35, 27)
menStd =   (2, 3, 4, 1, 2)

ind = np.arange(N)  # the x locations for the groups
width = 0.35       # the width of the bars

fig, ax = plt.subplots()
ax.set_ylim(0, 100)
rects1 = ax.bar(ind, menMeans, width, color='r', label='Men')

womenMeans = (25, 32, 34, 20, 25)
womenStd =   (3, 5, 2, 3, 3)
rects2 = ax.bar(ind+width, womenMeans, width, color='y', label='Women')

# add some text for labels, title and axes ticks
ax.set_ylabel('Scores')
ax.set_title('Scores by group and gender')

ax.set_xticks(ind+width)
ax.set_xticklabels( ('G1', 'G2', 'G3', 'G4', 'G5') )

ax.legend(loc=0)

def autolabel(rects):
    # attach some text labels
    for rect in rects:
        height = rect.get_height()
        ax.text(rect.get_x()+rect.get_width()/2., 1.05*height, '%d'%int(height),
                ha='center', va='bottom')

autolabel(rects1)
autolabel(rects2)

mpld3.save_html(fig,'./outbar.html')

Answer 1

mpld3 并非完全支持所有 matplotlib 功能。这是列表:mpld3 missing features .

set_xticklabels() 对 mpld3 图表没有影响。参见 issue 22 .

UPD:使用版本 0.2 和 0.3git 进行测试。