如何让Altair图表X轴基于数值动态分布而非固定间距？

问题描述 #

当前你的Altair图表将百分比（1%、2%、5%...100%）作为分类变量（%age:O）处理，导致X轴所有刻度间距完全一致，无法体现数值间的实际比例（比如1%和2%的间距应远小于2%和5%）。希望实现类似Excel图表的效果：X轴刻度基于0-100区间内的实际数值动态分布。

解决方案 #

核心是将X轴从分类型转为定量型，需要先清洗%age列的格式，再调整Altair的编码配置：

步骤1：处理百分比列的数值格式 #

在数据melt之后，把%age列的百分号去掉，转换为浮点型数值：

# 新增：清洗百分比列，转为数值
chart_df['%age'] = chart_df['%age'].str.replace('%', '').astype(float)

步骤2：修改Altair的X轴编码 #

将X轴的类型从O（分类）改为Q（定量），同时配置轴的显示格式和范围：

chart = alt.Chart(chart_df).mark_circle(size=60).encode(
    alt.X('%age:Q', 
          title='百分比',
          axis=alt.Axis(format='%'),  # 让刻度显示为百分号格式（如1%、2%）
          scale=alt.Scale(domain=[0, 100])  # 固定X轴范围为0-100，和Excel对齐
    ),
    alt.Y('Output:Q'),
    color='DATE:N',
    tooltip=[
        'DATE:N', 
        alt.Tooltip('%age:Q', format='%', title='百分比'),  # tooltip也显示百分号格式
        'Output:Q'
    ]
).properties(width=600, height=400)

完整修改后的代码 #

import altair as alt
import pandas as pd

chart_df = newdf.drop(columns=['NAME'])
chart_df = chart_df.astype({col: 'float' for col in chart_df.columns if col != 'DATE'})

numeric_cols = sorted(chart_df.columns[1:].to_list(), key=float)
chart_df = chart_df[['DATE'] + numeric_cols]

chart_df['DATE'] = pd.to_datetime(chart_df['DATE'], format='%Y.%m.%d')
chart_df = chart_df.melt(id_vars=['DATE'], var_name='%age', value_name='Output')

# 新增：清洗百分比列，转为数值
chart_df['%age'] = chart_df['%age'].str.replace('%', '').astype(float)

chart_df['DATE'] = chart_df['DATE'].dt.strftime('%Y-%m-%d')

chart = alt.Chart(chart_df).mark_circle(size=60).encode(
    alt.X('%age:Q', 
          title='百分比',
          axis=alt.Axis(format='%'),
          scale=alt.Scale(domain=[0, 100])
    ),
    alt.Y('Output:Q'),
    color='DATE:N',
    tooltip=[
        'DATE:N', 
        alt.Tooltip('%age:Q', format='%', title='百分比'),
        'Output:Q'
    ]
).properties(width=600, height=400)

st.altair_chart(chart, use_container_width=True)

效果说明 #

修改后，X轴会按照百分比的实际数值（1、2、5...100）在0-100的区间内分布，刻度间距会和数值差成正比，完全匹配你期望的Excel图表效果。

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