如何在django中绘制matplot lib (python)极散点图？

Question

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

下面是我的代码，用来显示一个空的极散点图：

<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图像。