python - plotly - 在 Plot.JS 中使用 graph_objects.Figure 轨迹

Question

Python Flask 中的后端

我正在尝试在 Plot.Js 中使用 go.Figure 的输出。格式看起来没问题。我尝试使用 fig.to_json 和 fig.to_dict()。还是行不通。有没有人试过 >?

def plot(df):
import plotly.graph_objs as go

for yum in yummies:
        df_tmp = df[df['mofo']==lom]

        trace = go.Scatter(
            x = df_tmp['x'],
            y = df_tmp['y'],
            mode='lines'
        )
        traces.append(trace)

fig = go.Figure(data=traces)
return fig.to_json()

前端

Plotly.plot('chart', traces);

输出

"{\"data\":[{\"mode\":\"lines\",\"type\":\"scatter\",\"x\":[651483.715259,651485.435309733,651536.216021465,651536.79112335],\"y\":[4767683.158094,4767685.6145821,4767758.13695434,4767758.95828497]},{\"mode\":\"lines\",\"type\":\"scatter\",\"x\":[651536.790999,651542.525,651543.815],\"y\":[4767758.958,4767767.147,4767768.99]},{\"mode\":\"lines\",\"type\":\"scatter\",\"x\":[651543.8153,651579.075789],\"y\":[4767768.989851,4767819.347047]},{\"mode\":\"lines\",\"type\":\"scatter\",\"x\":[651579.075789,651588.955710528,651590.676007965],\"y\":[4767819.347047,4767833.45703789,4767835.91387726]},{\"mode\":\"lines\",\"type\":\"scatter\",\"x\":[651491.303,651492.941,651506.869,651511.373,651513.011],\"y\":[4767690.072,4767688.925,4767679.172,4767676.018,4767674.872]}

Answer 1

你可以在 Javascript 中做这样的事情:

# json_fig would be your stringified version of the figure i.e. the result of fig.to_json
json_fig_object = JSON.parse(json_fig);

Plotly.newPlot("graph", json_fig_object.data, json_fig_object.layout, {});

出于演示目的，输出:

import plotly.graph_objects as go

fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[1, 3, 5])])
print(fig.to_json())

等于:

json_fig = JSON.stringify({
  data: [{ type: "scatter", x: [1, 2, 3], y: [1, 3, 5] }],
  layout: {
    template: {
      data: {
        bar: [
          {
            error_x: { color: "#2a3f5f" },
            error_y: { color: "#2a3f5f" },
            marker: {
              line: { color: "#E5ECF6", width: 0.5 },
              pattern: { fillmode: "overlay", size: 10, solidity: 0.2 },
            },
            type: "bar",
          },
        ],
        barpolar: [
          {
            marker: {
              line: { color: "#E5ECF6", width: 0.5 },
              pattern: { fillmode: "overlay", size: 10, solidity: 0.2 },
            },
            type: "barpolar",
          },
        ],
        carpet: [
          {
            aaxis: {
              endlinecolor: "#2a3f5f",
              gridcolor: "white",
              linecolor: "white",
              minorgridcolor: "white",
              startlinecolor: "#2a3f5f",
            },
            baxis: {
              endlinecolor: "#2a3f5f",
              gridcolor: "white",
              linecolor: "white",
              minorgridcolor: "white",
              startlinecolor: "#2a3f5f",
            },
            type: "carpet",
          },
        ],
        choropleth: [
          { colorbar: { outlinewidth: 0, ticks: "" }, type: "choropleth" },
        ],
        contour: [
          {
            colorbar: { outlinewidth: 0, ticks: "" },
            colorscale: [
              [0.0, "#0d0887"],
              [0.1111111111111111, "#46039f"],
              [0.2222222222222222, "#7201a8"],
              [0.3333333333333333, "#9c179e"],
              [0.4444444444444444, "#bd3786"],
              [0.5555555555555556, "#d8576b"],
              [0.6666666666666666, "#ed7953"],
              [0.7777777777777778, "#fb9f3a"],
              [0.8888888888888888, "#fdca26"],
              [1.0, "#f0f921"],
            ],
            type: "contour",
          },
        ],
        contourcarpet: [
          { colorbar: { outlinewidth: 0, ticks: "" }, type: "contourcarpet" },
        ],
        heatmap: [
          {
            colorbar: { outlinewidth: 0, ticks: "" },
            colorscale: [
              [0.0, "#0d0887"],
              [0.1111111111111111, "#46039f"],
              [0.2222222222222222, "#7201a8"],
              [0.3333333333333333, "#9c179e"],
              [0.4444444444444444, "#bd3786"],
              [0.5555555555555556, "#d8576b"],
              [0.6666666666666666, "#ed7953"],
              [0.7777777777777778, "#fb9f3a"],
              [0.8888888888888888, "#fdca26"],
              [1.0, "#f0f921"],
            ],
            type: "heatmap",
          },
        ],
        heatmapgl: [
          {
            colorbar: { outlinewidth: 0, ticks: "" },
            colorscale: [
              [0.0, "#0d0887"],
              [0.1111111111111111, "#46039f"],
              [0.2222222222222222, "#7201a8"],
              [0.3333333333333333, "#9c179e"],
              [0.4444444444444444, "#bd3786"],
              [0.5555555555555556, "#d8576b"],
              [0.6666666666666666, "#ed7953"],
              [0.7777777777777778, "#fb9f3a"],
              [0.8888888888888888, "#fdca26"],
              [1.0, "#f0f921"],
            ],
            type: "heatmapgl",
          },
        ],
        histogram: [
          {
            marker: {
              pattern: { fillmode: "overlay", size: 10, solidity: 0.2 },
            },
            type: "histogram",
          },
        ],
        histogram2d: [
          {
            colorbar: { outlinewidth: 0, ticks: "" },
            colorscale: [
              [0.0, "#0d0887"],
              [0.1111111111111111, "#46039f"],
              [0.2222222222222222, "#7201a8"],
              [0.3333333333333333, "#9c179e"],
              [0.4444444444444444, "#bd3786"],
              [0.5555555555555556, "#d8576b"],
              [0.6666666666666666, "#ed7953"],
              [0.7777777777777778, "#fb9f3a"],
              [0.8888888888888888, "#fdca26"],
              [1.0, "#f0f921"],
            ],
            type: "histogram2d",
          },
        ],
        histogram2dcontour: [
          {
            colorbar: { outlinewidth: 0, ticks: "" },
            colorscale: [
              [0.0, "#0d0887"],
              [0.1111111111111111, "#46039f"],
              [0.2222222222222222, "#7201a8"],
              [0.3333333333333333, "#9c179e"],
              [0.4444444444444444, "#bd3786"],
              [0.5555555555555556, "#d8576b"],
              [0.6666666666666666, "#ed7953"],
              [0.7777777777777778, "#fb9f3a"],
              [0.8888888888888888, "#fdca26"],
              [1.0, "#f0f921"],
            ],
            type: "histogram2dcontour",
          },
        ],
        mesh3d: [{ colorbar: { outlinewidth: 0, ticks: "" }, type: "mesh3d" }],
        parcoords: [
          {
            line: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "parcoords",
          },
        ],
        pie: [{ automargin: true, type: "pie" }],
        scatter: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scatter",
          },
        ],
        scatter3d: [
          {
            line: { colorbar: { outlinewidth: 0, ticks: "" } },
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scatter3d",
          },
        ],
        scattercarpet: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scattercarpet",
          },
        ],
        scattergeo: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scattergeo",
          },
        ],
        scattergl: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scattergl",
          },
        ],
        scattermapbox: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scattermapbox",
          },
        ],
        scatterpolar: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scatterpolar",
          },
        ],
        scatterpolargl: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scatterpolargl",
          },
        ],
        scatterternary: [
          {
            marker: { colorbar: { outlinewidth: 0, ticks: "" } },
            type: "scatterternary",
          },
        ],
        surface: [
          {
            colorbar: { outlinewidth: 0, ticks: "" },
            colorscale: [
              [0.0, "#0d0887"],
              [0.1111111111111111, "#46039f"],
              [0.2222222222222222, "#7201a8"],
              [0.3333333333333333, "#9c179e"],
              [0.4444444444444444, "#bd3786"],
              [0.5555555555555556, "#d8576b"],
              [0.6666666666666666, "#ed7953"],
              [0.7777777777777778, "#fb9f3a"],
              [0.8888888888888888, "#fdca26"],
              [1.0, "#f0f921"],
            ],
            type: "surface",
          },
        ],
        table: [
          {
            cells: { fill: { color: "#EBF0F8" }, line: { color: "white" } },
            header: { fill: { color: "#C8D4E3" }, line: { color: "white" } },
            type: "table",
          },
        ],
      },
      layout: {
        annotationdefaults: {
          arrowcolor: "#2a3f5f",
          arrowhead: 0,
          arrowwidth: 1,
        },
        autotypenumbers: "strict",
        coloraxis: { colorbar: { outlinewidth: 0, ticks: "" } },
        colorscale: {
          diverging: [
            [0, "#8e0152"],
            [0.1, "#c51b7d"],
            [0.2, "#de77ae"],
            [0.3, "#f1b6da"],
            [0.4, "#fde0ef"],
            [0.5, "#f7f7f7"],
            [0.6, "#e6f5d0"],
            [0.7, "#b8e186"],
            [0.8, "#7fbc41"],
            [0.9, "#4d9221"],
            [1, "#276419"],
          ],
          sequential: [
            [0.0, "#0d0887"],
            [0.1111111111111111, "#46039f"],
            [0.2222222222222222, "#7201a8"],
            [0.3333333333333333, "#9c179e"],
            [0.4444444444444444, "#bd3786"],
            [0.5555555555555556, "#d8576b"],
            [0.6666666666666666, "#ed7953"],
            [0.7777777777777778, "#fb9f3a"],
            [0.8888888888888888, "#fdca26"],
            [1.0, "#f0f921"],
          ],
          sequentialminus: [
            [0.0, "#0d0887"],
            [0.1111111111111111, "#46039f"],
            [0.2222222222222222, "#7201a8"],
            [0.3333333333333333, "#9c179e"],
            [0.4444444444444444, "#bd3786"],
            [0.5555555555555556, "#d8576b"],
            [0.6666666666666666, "#ed7953"],
            [0.7777777777777778, "#fb9f3a"],
            [0.8888888888888888, "#fdca26"],
            [1.0, "#f0f921"],
          ],
        },
        colorway: [
          "#636efa",
          "#EF553B",
          "#00cc96",
          "#ab63fa",
          "#FFA15A",
          "#19d3f3",
          "#FF6692",
          "#B6E880",
          "#FF97FF",
          "#FECB52",
        ],
        font: { color: "#2a3f5f" },
        geo: {
          bgcolor: "white",
          lakecolor: "white",
          landcolor: "#E5ECF6",
          showlakes: true,
          showland: true,
          subunitcolor: "white",
        },
        hoverlabel: { align: "left" },
        hovermode: "closest",
        mapbox: { style: "light" },
        paper_bgcolor: "white",
        plot_bgcolor: "#E5ECF6",
        polar: {
          angularaxis: { gridcolor: "white", linecolor: "white", ticks: "" },
          bgcolor: "#E5ECF6",
          radialaxis: { gridcolor: "white", linecolor: "white", ticks: "" },
        },
        scene: {
          xaxis: {
            backgroundcolor: "#E5ECF6",
            gridcolor: "white",
            gridwidth: 2,
            linecolor: "white",
            showbackground: true,
            ticks: "",
            zerolinecolor: "white",
          },
          yaxis: {
            backgroundcolor: "#E5ECF6",
            gridcolor: "white",
            gridwidth: 2,
            linecolor: "white",
            showbackground: true,
            ticks: "",
            zerolinecolor: "white",
          },
          zaxis: {
            backgroundcolor: "#E5ECF6",
            gridcolor: "white",
            gridwidth: 2,
            linecolor: "white",
            showbackground: true,
            ticks: "",
            zerolinecolor: "white",
          },
        },
        shapedefaults: { line: { color: "#2a3f5f" } },
        ternary: {
          aaxis: { gridcolor: "white", linecolor: "white", ticks: "" },
          baxis: { gridcolor: "white", linecolor: "white", ticks: "" },
          bgcolor: "#E5ECF6",
          caxis: { gridcolor: "white", linecolor: "white", ticks: "" },
        },
        title: { x: 0.05 },
        xaxis: {
          automargin: true,
          gridcolor: "white",
          linecolor: "white",
          ticks: "",
          title: { standoff: 15 },
          zerolinecolor: "white",
          zerolinewidth: 2,
        },
        yaxis: {
          automargin: true,
          gridcolor: "white",
          linecolor: "white",
          ticks: "",
          title: { standoff: 15 },
          zerolinecolor: "white",
          zerolinewidth: 2,
        },
      },
    },
  },
});

使用 json_fig 的这个值，绘图产生于:

Plotly.newPlot("graph", json_fig_object.data, json_fig_object.layout, {});

看起来像这样:

为了以编程方式链接 python to_json() 输出的输出，您可以使用 Python 构建一个 api，您的 Javascript 可以从中调用和绘图。