如何在django中绘制matplot lib（python）极坐标散点图？

Question

我正在编写一个Web应用程序，我必须在网页中绘制极坐标散点图（https://matplotlib.org/examples/pie_and_polar_charts/polar_scatter_demo.html）。极坐标散点图使用python matplotlib生成，然后转换为JSON格式并使用mpld3库（https://mpld3.github.io/install.html）显示在网页上。

这是我的代码，显示一个空的极坐标散点图：

<script src=".../mpld3/d3.v3.min.js"></script>
<script src=".../mpld3/mpld3.v0.3.1.dev1.min.js"></script>

<div class="col-sm-7">
<div id="fig01"></div>
<script>
   mpld3.draw_figure("fig01",{"id": "el44281963893827960", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}], "height": 480.0, "data": {}, "width": 640.0, "axes": [{"yscale": "linear", "id": "el44281963940408456", "axesbg": "#FFFFFF", "xdomain": [0.0, 6.283185307179586], "images": [], "xlim": [0.0, 6.283185307179586], "axesbgalpha": null, "collections": [], "ydomain": [0.0, 4.0], "markers": [], "texts": [], "xscale": "linear", "lines": [], "sharey": [], "paths": [], "axes": [{"grid": {"color": "#B0B0B0", "alpha": 1.0, "dasharray": "none", "gridOn": true}, "fontsize": 10.0, "scale": "linear", "visible": true, "nticks": 8, "position": "bottom", "tickformat": ["3", "2", "1", "8", "7", "6", "5", "4"], "tickvalues": [0.0, 0.7853981633974483, 1.5707963267948966, 2.356194490192345, 3.141592653589793, 3.9269908169872414, 4.71238898038469, 5.497787143782138]}, {"grid": {"color": "#B0B0B0", "alpha": 1.0, "dasharray": "none", "gridOn": true}, "fontsize": 10.0, "scale": "linear", "visible": true, "nticks": 4, "position": "left", "tickformat": ["Gen 1", "Gen 2", "Gen 3", ""], "tickvalues": [1.0, 2.0, 3.0, 4.0]}], "zoomable": true, "bbox": [0.22375000000000006, 0.10999999999999999, 0.5774999999999999, 0.77], "sharex": [], "ylim": [0.0, 4.0]}]} );
</script>

这里的问题是图表是作为普通图表生成的，而不是作为圆形的极坐标散点图。

这是我在渲染网页后得到的：

这是我期待的（从matplotlib生成）：

有关如何在我的网页上获取此圆形图的任何想法？所有建议都将受到高度赞赏。

Answer 1

mpld3有一个issue raised in 2015。由于它仍然是一个悬而未决的问题，我认为你现在不能用mpld3进行极地情节。您可能需要转到this example等替代方案，使用Data URI scheme嵌入Base64图像。