如何在Python的Dash框架中获取Highcharts的悬浮点击数据？

我用Python和Dash结合dash_alternative_viz绘制了堆叠柱状图，现在需要实现点击任意数据点时，获取该点的悬浮数据（比如所属分类、系列名称、数值等）。以下是我的代码、数据集和图表效果：

图表效果 #

原代码 #

import pandas as pd
import dash_alternative_viz as dav
import dash
from dash import html

df = pd.read_csv("bar.csv")
bar_plot_dict = {
    "series": [],
    "title": {"text": "Bar Plot"},
    "xAxis": {"categories": df["sectors"]},
    "chart": {"type": "bar", "inverted": True, "height": "900px"},
}

for col, color in zip(
    [i for i in df.columns if i.startswith("col")],
    ["green", "red", "yellow"],
):
    series = {
        "name": col,
        "data": df[col],
        "color": color,
        "type": "bar",
        "stacking": "normal",
    }
    bar_plot_dict["series"].append(series)

app = dash.Dash(__name__)
highchart_barplot = html.Div(dav.HighChart(id="line-plot", options=bar_plot_dict))
app.layout = html.Div([highchart_barplot])
app.run(port=8003, debug=True)

数据集 #

,sectors,col 1,col 2,col 3
0,A,4.89555774,15.20538823,235.1483496
1,B,330.7514786,14.43483274,120.3015848
2,C,323.2680204,35.14712088,511.8969181

要实现点击数据点获取悬浮数据，需利用Dash的回调机制，结合dash_alternative_viz.HighChart组件的clickData属性。修改后的完整代码如下：

import pandas as pd
import dash_alternative_viz as dav
import dash
from dash import html, callback, Input, Output

df = pd.read_csv("bar.csv")
bar_plot_dict = {
    "series": [],
    "title": {"text": "Bar Plot"},
    "xAxis": {"categories": df["sectors"]},
    "chart": {"type": "bar", "inverted": True, "height": "900px"},
}

for col, color in zip(
    [i for i in df.columns if i.startswith("col")],
    ["green", "red", "yellow"],
):
    series = {
        "name": col,
        "data": df[col],
        "color": color,
        "type": "bar",
        "stacking": "normal",
    }
    bar_plot_dict["series"].append(series)

app = dash.Dash(__name__)
# 新增用于展示点击结果的组件
app.layout = html.Div([
    html.Div(dav.HighChart(id="line-plot", options=bar_plot_dict)),
    html.Div(id="click-result", style={"margin-top": "20px", "font-size": "16px"})
])

# 编写回调函数监听点击事件
@callback(
    Output("click-result", "children"),
    Input("line-plot", "clickData")
)
def display_click_data(click_data):
    if click_data is None:
        return "点击图表中的数据点查看详情"
    # 解析点击返回的数据
    point_info = click_data["points"][0]
    sector = point_info["category"]
    series_name = point_info["seriesName"]
    value = round(point_info["y"], 4)
    return f"点击的数据点：分类={sector}，系列={series_name}，数值={value}"

if __name__ == "__main__":
    app.run(port=8003, debug=True)

关键说明 #

• clickData是HighChart组件的内置交互属性，点击数据点时会返回包含点详情的字典，核心结构如下：

  {
      "points": [
          {
              "category": "A",
              "seriesName": "col 1",
              "y": 4.89555774
          }
      ]
  }
  

• 回调函数监听clickData的变化，当检测到点击事件时，解析其中的分类、系列名称和数值，实时更新页面上的结果展示区域。

内容的提问来源于stack exchange，提问作者Muhammad Faizan