主页 / coding / 问题 / 79102301
Accepted
Nicola Gigante
Asked: 2024-10-18 21:31:35 +0800 CST

如何使用 HTMX 更新 Plotly 图形的数据并保持当前视图状态（缩放/平移/等...）

  • 772

我使用 FastAPI 作为 Python 后端，并使用 Plotly 根据一些数据生成图表。在客户端，我使用 HTMX。

服务器直接发送 Plot 的 HTML Figure.to_html( full_html = False)，然后 HTMX 将其直接交换到页面中的正确位置。

这一切都非常方便且易于操作，但现在我需要在数据发生变化时实时更新绘图。因此，我使用 FastAPI 和wsHTMX 扩展建立了 websocket 连接，以便在需要时更新绘图。

问题是，如果我在每次更新数据时再次发送整个图，整个图就会被 HTMX 交换，用户就会丢失图的当前视图状态，即缩放率、平移位置等...

那么有没有办法可以更详细地了解从 Plotly 发送的内容？

我需要：

  1. 仅设置一次情节（我想用 Plotly.js？）
  2. 单独发送数据（从 Plotly python 库导出它们？）
  3. 以不破坏用户视图状态的方式使用新数据更新图表。

我该如何做？可能吗？

plotly

1 个回答

  1. Best Answer

    除了 HTMX（原理应该保持不变），我建议：

    1. Python 后端提供初始页面：它包含一个具有特定 id 的空 div 包装器、初始数据和使用 Plotly.js 创建/更新绘图的脚本：

    2. 后端向客户端发送实时数据（JSON）。

    3. 客户端将新数据附加到当前数据并相应地更新图表（参见Plotly.js 函数参考）

    <head>
  <!-- Load plotly.js into the DOM -->
  <script src='https://cdn.plot.ly/plotly-2.35.2.min.js'></script>
</head>
<body>
  <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
<script>
  // Create graph with initial data
  const gd = document.getElementById('myDiv');
  const data = [{ /* ... */ }];
  const layout = { /* ... */ };
  Plotly.newPlot(gd, data, layout);

  // Update graph when receiving new data
  function onUpdate(newData) {
    append(data, newData); // custom function, depends on data (plotly trace type)
    Plotly.restyle(gd, data); // use Plotly.restyle to update data only
  }

  /* Logic for updating data (register `onUpdate`, define `append` etc.) ... */ 
</script>

    您还可以在 Python 中初始化整个图形以利用 Plotly.py 及其模板（未包含在 Plotly.js 中），这样您就不必在 JavaScript 中手动执行此操作。用于fig.to_json()序列化整个图形，例如。

    import plotly.express as px

df = px.data.medals_wide()
fig = px.bar(df, x='nation', y=['gold', 'silver', 'bronze'])
fig_json = fig.to_json()

    并注入fig_json你的脚本（而不仅仅是那些data需要更新的道具）：

    // Create graph with initial data
const gd = document.getElementById('plot');
const fig = JSON.parse(fig_json);
const data = fig.data;
const layout = fig.layout;
Plotly.newPlot(gd, data, layout);

    为了正确地序列化dataprops（除了图之外），特别是当它们包含由第三方模块（如 numpy、pandas、PIL）提供的类型时，使用pio.json.to_json_plotly()：

    import numpy as np
import plotly.io as pio

data = dict(x=np.array([1, 2, 3]), y=np.array([1, 2, 3]))
data_json = pio.json.to_json_plotly(data)
    • 1

相关问题