如何用Python制作适配目标样式的自定义交互数据分析图表

需求说明 #

我想要制作适配下图样式的自定义图表：

同时希望实现点击表格行联动展示对应数据的图表，但不清楚该用哪个Python库。我已经完成了数据转换处理，相关代码及输出数据如下：

数据处理代码 #

import pandas as pd

# 读取CSV文件
df = pd.read_csv('Data/DrivingRange.csv', sep=',')
df = df.drop(index=0)

# 转换数值类型
df['Carry-Distanz'] = pd.to_numeric(df['Carry-Distanz'], errors='coerce')
df['Schl.gsch.'] = pd.to_numeric(df['Schl.gsch.'], errors='coerce')
df['Schwungbahn'] = pd.to_numeric(df['Schwungbahn'], errors='coerce')
df['Schlagfläche'] = pd.to_numeric(df['Schlagfläche'], errors='coerce')
df['Schlagflächenstellung'] = pd.to_numeric(df['Schlagflächenstellung'], errors='coerce')

# 球杆速度转换为mph
df['Schl_gsch_mph'] = df['Schl.gsch.'] * 0.621371

# 定义球杆排序顺序
sequence = ['Lob-Wedge', 'Sandwedge', 'Eisen 9', 'Eisen 8', 'Eisen 7', 'Eisen 6', 'Eisen 5', 'Hybrid 4', 'Driver']
df['Schlägerart'] = pd.Categorical(df['Schlägerart'], categories=sequence, ordered=True)

# 按球杆类别排序
df_sorted = df.sort_values(by='Schlägerart')

# 筛选并重命名列
df_sorted_filtered = df_sorted[['Schlägerart','Schl_gsch_mph', 'Carry-Distanz', 'Schwungbahn', 'Schlagfläche', 'Schlagflächenstellung']]
df_sorted_filtered.rename(columns={'Schlägerart': 'Club', 'Schl_gsch_mph': 'Club Speed', 'Carry-Distanz' : 'Carry Distance', 'Schwungbahn': 'Club Path', 'Schlagfläche' : 'Face Angle', 'Schlagflächenstellung' : 'Face to Path'}, inplace=True)
print(df_sorted_filtered)

处理后输出数据 #

Club  Club Speed  Carry Distance  Club Path  Face Angle  Face to Path
30  Lob-Wedge   67.779147       68.842956      -3.89        4.12          8.01
31  Lob-Wedge   67.712039       58.803586       5.71       20.79         15.08
1   Sandwedge   62.611826       76.651350      -1.75       -0.25          1.50
2   Sandwedge   62.007853       60.411199       2.02       -2.80         -4.82
3   Sandwedge   67.197544       93.361768       6.17       -5.94        -12.11

推荐Python库 #

1. Plotly Dash #

• 原生支持交互式表格与图表的联动，完美实现点击表格行更新图表的需求
• 图表样式高度可定制，能精准匹配你想要的设计风格
• 基于Web技术，生成的可视化界面可在浏览器中直接交互使用，方便分享

简单示例代码

import dash
from dash import dash_table, dcc, html, Input, Output
import plotly.express as px
import pandas as pd

# 假设df_sorted_filtered是你处理好的数据框
app = dash.Dash(__name__)

# 构建界面布局：表格+图表
app.layout = html.Div([
    dash_table.DataTable(
        id='club-table',
        columns=[{"name": col, "id": col} for col in df_sorted_filtered.columns],
        data=df_sorted_filtered.to_dict('records'),
        row_selectable='single',  # 支持单行选择
        selected_rows=[0]  # 默认选中第一行
    ),
    dcc.Graph(id='club-detail-chart')
])

# 回调函数：根据选中行更新图表
@app.callback(
    Output('club-detail-chart', 'figure'),
    Input('club-table', 'selected_rows')
)
def update_selected_chart(selected_rows):
    selected_row_data = df_sorted_filtered.iloc[selected_rows]
    # 生成展示选中行各项指标的柱状图
    fig = px.bar(
        selected_row_data.melt(id_vars='Club'),
        x='variable',
        y='value',
        title=f'{selected_row_data["Club"].values[0]} 数据详情'
    )
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

2. Bokeh #

• 支持交互式组件联动，表格与图表的交互逻辑实现简单
• 提供丰富的样式自定义API，能复刻目标图表的视觉效果
• 可导出为独立HTML文件，无需服务器即可查看交互效果

3. Panel #

• 专注于交互式数据分析仪表盘，表格与图表的联动配置高效便捷
• 兼容Matplotlib、Plotly、Bokeh等多种绘图库，灵活性极高
• 适合快速搭建功能完整的数据可视化界面

总结 #

如果追求高度定制化的Web交互体验，优先选择Plotly Dash；如果需要轻量易部署的解决方案，Bokeh是不错的选择；Panel则适合快速整合多种绘图工具搭建综合性仪表盘。

内容的提问来源于stack exchange，提问作者0x53olution