Taipy中自定义Plotly图表集成失败及动态更新方法咨询

一、修复集成失败问题 #

原代码使用user_content方式过于复杂，Taipy提供了原生的<|chart|>组件可直接渲染Plotly图表，无需手动转换HTML。调整后的完整代码如下：

import plotly.graph_objects as go
import numpy as np
from taipy.gui import Gui, State

# 旋转矩阵生成函数
def create_rotation_matrix(A, B, C):
    Rz = np.array([[np.cos(A), -np.sin(A), 0], [np.sin(A), np.cos(A), 0], [0, 0, 1]])
    Ry = np.array([[np.cos(B), 0, np.sin(B)], [0, 1, 0], [-np.sin(B), 0, np.cos(B)]])
    Rx = np.array([[1, 0, 0], [0, np.cos(C), -np.sin(C)], [0, np.sin(C), np.cos(C)]])
    return Rz @ Ry @ Rx

# 初始化数据
BASE_DATA = {
    1: {"X": 205.204498, "Y": -1396.70898, "Z": 383.235413, "A": -87.5785, "B": 0.539600, "C": -13.9059},
    2: {"X": 298.000, "Y": -1475.49597, "Z": 335.000, "A": -88.8150, "B": 0.130000, "C": -0.178000}
}
axis_length = 100

# 生成Plotly图表的函数
def generate_figure(data):
    fig = go.Figure()
    for key, point in data.items():
        # 角度转弧度
        A, B, C = np.radians(point["A"]), np.radians(point["B"]), np.radians(point["C"])
        R = create_rotation_matrix(A, B, C)
        ref_frame_vectors = R @ np.array([[1, 0, 0], [0, 1, 0], [0, 0, 1]]).T

        # 添加散点
        fig.add_trace(go.Scatter3d(x=[point["X"]], y=[point["Y"]], z=[point["Z"]],
                                   mode='markers', marker=dict(size=4, color=['blue', 'orange'][key-1])))

        # 添加参考系轴线
        for i, color in zip(range(3), ['red', 'green', 'blue']):
            fig.add_trace(go.Scatter3d(x=[point["X"], point["X"] + axis_length * ref_frame_vectors[i, 0]], 
                                       y=[point["Y"], point["Y"] + axis_length * ref_frame_vectors[i, 1]], 
                                       z=[point["Z"], point["Z"] + axis_length * ref_frame_vectors[i, 2]], 
                                       mode='lines', line=dict(color=color, width=2)))

    # 添加两点连接线
    fig.add_trace(go.Scatter3d(x=[data[1]["X"], data[2]["X"]],
                               y=[data[1]["Y"], data[2]["Y"]],
                               z=[data[1]["Z"], data[2]["Z"]],
                               mode='lines', line=dict(color='grey', width=2, dash='dash')))

    # 布局设置
    fig.update_layout(scene=dict(
                        xaxis_title='X Axis',
                        yaxis_title='Y Axis',
                        zaxis_title='Z Axis'),
                      margin=dict(r=0, b=0, l=0, t=0))
    return fig

# 初始化图表
fig = generate_figure(BASE_DATA)

# Taipy页面定义
page = """
# 带参考系的3D散点图
<|chart|figure={fig}|height=800px|>
"""

# 创建Gui实例并运行
if __name__ == "__main__":
    Gui(page).run()

关键修改点 #

• 移除复杂的user_content相关代码，改用Taipy原生<|chart|>组件直接绑定Plotly的fig对象
• 将图表生成逻辑封装为generate_figure函数，便于后续复用和动态更新

二、实现数值修改后的动态更新 #

要实现动态更新，需将数据绑定到Taipy的State对象，添加输入组件并绑定更新回调，当数值变化时重新生成图表并更新state.fig。

调整后的完整代码：

import plotly.graph_objects as go
import numpy as np
from taipy.gui import Gui, State

# 旋转矩阵生成函数
def create_rotation_matrix(A, B, C):
    Rz = np.array([[np.cos(A), -np.sin(A), 0], [np.sin(A), np.cos(A), 0], [0, 0, 1]])
    Ry = np.array([[np.cos(B), 0, np.sin(B)], [0, 1, 0], [-np.sin(B), 0, np.cos(B)]])
    Rx = np.array([[1, 0, 0], [0, np.cos(C), -np.sin(C)], [0, np.sin(C), np.cos(C)]])
    return Rz @ Ry @ Rx

axis_length = 100

# 生成Plotly图表的函数
def generate_figure(data):
    fig = go.Figure()
    for key, point in data.items():
        # 角度转弧度
        A, B, C = np.radians(point["A"]), np.radians(point["B"]), np.radians(point["C"])
        R = create_rotation_matrix(A, B, C)
        ref_frame_vectors = R @ np.array([[1, 0, 0], [0, 1, 0], [0, 0, 1]]).T

        # 添加散点
        fig.add_trace(go.Scatter3d(x=[point["X"]], y=[point["Y"]], z=[point["Z"]],
                                   mode='markers', marker=dict(size=4, color=['blue', 'orange'][key-1])))

        # 添加参考系轴线
        for i, color in zip(range(3), ['red', 'green', 'blue']):
            fig.add_trace(go.Scatter3d(x=[point["X"], point["X"] + axis_length * ref_frame_vectors[i, 0]], 
                                       y=[point["Y"], point["Y"] + axis_length * ref_frame_vectors[i, 1]], 
                                       z=[point["Z"], point["Z"] + axis_length * ref_frame_vectors[i, 2]], 
                                       mode='lines', line=dict(color=color, width=2)))

    # 添加两点连接线
    fig.add_trace(go.Scatter3d(x=[data[1]["X"], data[2]["X"]],
                               y=[data[1]["Y"], data[2]["Y"]],
                               z=[data[1]["Z"], data[2]["Z"]],
                               mode='lines', line=dict(color='grey', width=2, dash='dash')))

    # 布局设置
    fig.update_layout(scene=dict(
                        xaxis_title='X Axis',
                        yaxis_title='Y Axis',
                        zaxis_title='Z Axis'),
                      margin=dict(r=0, b=0, l=0, t=0))
    return fig

# 初始化数据（绑定到state）
def on_init(state: State):
    state.data = {
        1: {"X": 205.204498, "Y": -1396.70898, "Z": 383.235413, "A": -87.5785, "B": 0.539600, "C": -13.9059},
        2: {"X": 298.000, "Y": -1475.49597, "Z": 335.000, "A": -88.8150, "B": 0.130000, "C": -0.178000}
    }
    state.fig = generate_figure(state.data)

# 数据更新回调函数
def update_chart(state: State):
    state.fig = generate_figure(state.data)

# Taipy页面定义（添加输入组件）
page = """
# 带参考系的3D散点图（动态更新版）

## 点1参数
<|layout|columns=3|
<|X: {data[1].X}|input|on_change=update_chart|>
<|Y: {data[1].Y}|input|on_change=update_chart|>
<|Z: {data[1].Z}|input|on_change=update_chart|>
<|A: {data[1].A}|input|on_change=update_chart|>
<|B: {data[1].B}|input|on_change=update_chart|>
<|C: {data[1].C}|input|on_change=update_chart|>
|>

## 点2参数
<|layout|columns=3|
<|X: {data[2].X}|input|on_change=update_chart|>
<|Y: {data[2].Y}|input|on_change=update_chart|>
<|Z: {data[2].Z}|input|on_change=update_chart|>
<|A: {data[2].A}|input|on_change=update_chart|>
<|B: {data[2].B}|input|on_change=update_chart|>
<|C: {data[2].C}|input|on_change=update_chart|>
|>

<|chart|figure={fig}|height=800px|>
"""

# 创建Gui实例并运行
if __name__ == "__main__":
    Gui(page).run()

动态更新核心逻辑 #

1. 将数据data存储在Taipy的State对象中，确保输入组件能直接绑定并修改这些值
2. 定义update_chart回调函数，当输入组件的值变化时，调用generate_figure重新生成图表，并将新的fig赋值给state.fig
3. Taipy的<|chart|>组件会自动监听state.fig的变化，实时刷新图表

内容的提问来源于stack exchange，提问作者Aravind R K