基于示例创建Streamlit-Altair图表却无数据显示的问题

我尝试基于Vega-Lite的交互条形图示例，用streamlit-altair实现图表，但应用中的图表为空，无法显示完整数据，实现代码如下：

import altair as alt
import streamlit as st

from view.frontend.path import BasePath

chart_spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
    "data": {
        "values": [
            {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
            {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
            {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52},
        ]
    },
    "params": [
        {
            "name": "highlight",
            "select": {"type": "point", "on": "pointerover"}
        },
        {"name": "select", "select": "point"}
    ],
    "mark": {
        "type": "bar",
        "fill": "#4C78A8",
        "stroke": "black",
        "cursor": "pointer",
    },
    "encoding": {
        "x": {"field": "a", "type": "ordinal"},
        "y": {"field": "b", "type": "quantitative"},
        "fillOpacity": {
            "condition": {"param": "select", "value": 1},
            "value": 0.3,
        },
        "strokeWidth": {
            "condition": [
                {
                    "param": "select",
                    "empty": False,
                    "value": 2,
                },
                {
                    "param": "highlight",
                    "empty": False,
                    "value": 1,
                }
            ],
            "value": 0
        }
    },
    "config": {
        "scale": {"bandPaddingInner": 0.2}
    }
}

class Path(BasePath):
    def __init__(self, payload: dict):
        self._path_spec = payload

    def render(self, container):
        with container:
            # Altair Chart
            chart = alt.Chart().from_dict(chart_spec)

            # Display chart in Streamlit
            click_event = st.altair_chart(
                chart, use_container_width=True, on_select="rerun"
            )

            # Catch the click and display result
            if click_event is not None:
                st.write(f"Clicked on: {click_event}")

错误原因及修复方案 #

• 核心错误：图表初始化方式不正确
  你使用alt.Chart().from_dict(chart_spec)的写法是错误的——这种方式会创建一个空Chart实例再加载spec，导致spec中定义的data无法正确关联到图表上。正确的做法是直接调用alt.from_dict()加载完整的spec。

• 修复后的图表初始化代码：
  将：

  chart = alt.Chart().from_dict(chart_spec)
  

  修改为：

  chart = alt.from_dict(chart_spec)
  

• 可选优化：点击事件解析
  原代码输出的点击事件是原始结构，可读性较差，可以调整为提取具体选中数据：

  if click_event:
      selected_points = click_event.get('selection', {}).get('select', {}).get('points', [])
      if selected_points:
          st.write(f"选中项：{selected_points[0]['a']}，数值：{selected_points[0]['b']}")
  

内容的提问来源于stack exchange，提问作者HuLu ViCa