在 React 中渲染 mpld3 JSON 圖表

Question

再會。

我最近剛剛遇到mpld3 ，我正在嘗試看看它是否能解決我的問題。

我想在 Python 中創建 Matplotlib 圖表，將它們作為 JSON 對象保存到數據庫中，然后在我的 React 網頁中呈現它們。

到目前為止，我已經在 Python 中創建了一個繪圖，使用 Matplotlib 並將其轉換為字典中的 JSON 對象：

fig = plt.gcf()
mpld3.display(fig)
fig_to_dict = mpld3.fig_to_dict(fig)

現在我可以將字典保存到文件中。

我的問題是：然后我可以在我的 React 項目中渲染這個 JSON 圖表嗎？ 如果是這樣，我該怎么做？

另一件事是 - 我不能在前端使用 D3，我需要在后端完成所有“圖表制作”。

感謝您的任何幫助！

Answer 1

這不是一個完美的答案，但我似乎正在解決一個類似的問題，而且我似乎已經讓它工作了，所以我按原樣分享我的代碼。 希望它對某人有用。

這是我的反應組件（'matPlotLibFig.js'），它呈現一個簡單的圖形

import React from 'react'
import mpld3_load_lib from "./mpld3_load_lib";
import mpld3 from 'mpld3'
import _json from "./plot_b.json"
const MatPlotLibFig = () => {
  const fig_name = "fig_el427345810798888193429725"
  return <div>
    <script>
      mpld3_load_lib("https://d3js.org/d3.v5.js", function () {
        mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.5.8.js", function () {
          mpld3.remove_figure(fig_name)
          mpld3.draw_figure(fig_name, _json);
        })
      });
    </script>
    <div id={fig_name}></div>
  </div>
}
export default MatPlotLibFig

plot_b.json：

{
  "width": 640.0,
  "height": 480.0,
  "axes": [
    {
      "bbox": [0.125, 0.11, 0.775, 0.77],
      "xlim": [-0.5, 10],
      "ylim": [0, 10],
      "xdomain": [-0.2, 10],
      "ydomain": [0.0, 10],
      "xscale": "linear",
      "yscale": "linear",
      "axes": [
        {
          "position": "bottom",
          "nticks": 11,
          "tickvalues": null,
          "tickformat_formatter": "",
          "tickformat": null,
          "scale": "linear",
          "fontsize": 10.0,
          "grid": {
            "gridOn": false
          },
          "visible": true
        },
        {
          "position": "left",
          "nticks": 11,
          "tickvalues": null,
          "tickformat_formatter": "",
          "tickformat": null,
          "scale": "linear",
          "fontsize": 10.0,
          "grid": {
            "gridOn": false
          },
          "visible": true
        }
      ],
      "axesbg": "#FFFFFF",
      "axesbgalpha": null,
      "zoomable": true,
      "id": "el91906139874005984112",
      "lines": [
        {
          "data": "data01",
          "xindex": 0,
          "yindex": 1,
          "coordinates": "data",
          "id": "el91906139873968544448",
          "color": "#000000",
          "linewidth": 1.5,
          "dasharray": "none",
          "alpha": 1,
          "zorder": 2,
          "drawstyle": "default"
        }
      ],
      "paths": [],
      "markers": [
        {
          "data": "data01",
          "xindex": 0,
          "yindex": 1,
          "coordinates": "data",
          "id": "el91906139873968544448pts",
          "facecolor": "#000000",
          "edgecolor": "#FFFFFF",
          "edgewidth": 5,
          "alpha": 1,
          "zorder": 2,
          "markerpath": [
            [
              [
                -10.0,
                10.0
              ],
              [
                10.0,
                10.0
              ],
              [
                10.0,
                -10.0
              ],
              [
                -10.0,
                -10.0
              ]
            ],
            [
              "M",
              "L",
              "L",
              "L",
              "Z"
            ]
          ]
        }
      ],
      "texts": [],
      "collections": [],
      "images": [],
      "sharex": [],
      "sharey": []
    }
  ],
  "data": {
    "data01": [
      [
        0.0,
        6.0
      ],
      [
        1.0,
        2.0
      ],
      [
        2.0,
        8.0
      ],
      [
        3.0,
        3.0
      ],
      [
        4.0,
        0.0
      ],
      [
        5.0,
        7.0
      ]
    ]
  },
  "id": "el91906139874196422128",
  "plugins": [
    {
      "type": "reset"
    },
    {
      "type": "zoom",
      "button": true,
      "enabled": false
    },
    {
      "type": "boxzoom",
      "button": true,
      "enabled": false
    }
  ]
}

mpld3_load_lib.js：

const 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);
}
export default mpld3_load_lib

它呈現了一個看起來像的動態圖