基于DataFrame的Plotly折线图：Y轴刻度异常及X轴按天显示问题

一、Y轴未按价格数值排序的修复 #

问题根源 #

代码里的df['Price'] = df['Price'].map('${:,.2f}'.format)把数值类型的Price转换成了带$符号的字符串，Plotly渲染时会将其当作文本处理，因此Y轴会按字符串字典序排序，而非数值大小排序。同时当前DataFrame按日期降序排列，不符合时间序列图表从旧到新的常规展示逻辑，也会导致折线走向不符合预期。

解决方案 #

1. 移除格式化Price为字符串的代码，保留数值类型用于绘图；
2. 将DataFrame改为日期升序排列；
3. 在绘图环节通过配置项设置Y轴的货币显示格式。

二、X轴设置为显示每一天 #

解决方案 #

通过update_layout配置X轴参数，强制按日显示日期，同时调整标签角度避免重叠：

• tickmode='linear': 强制按线性间隔生成刻度
• dtick='D1': 设置刻度间隔为1天
• tickangle=-45: 旋转日期标签，避免重叠

修改后的完整代码 #

import requests
import pandas as pd
import plotly.express as px

response = requests.get(url) 

data = response.json() 
data1 = data['data']
rates = data1['rates']
rates_dic = rates.items() 

df = pd.DataFrame(rates_dic) 
df[1] = [x[symbol] for x in df[1]]
df.rename(columns = {0:'Date', 1:'Price'}, inplace=True)
df.Price = 1 / df.Price  # 所有商品价格需除以1
df['Date'] = pd.to_datetime(df['Date'])
df.sort_values(by='Date', ascending=True, inplace=True)  # 改为日期升序排列

# 绘制折线图
line_chart = px.line(
    df,
    x = "Date",
    y = "Price",
    title = "近30天商品价格"
)

# 配置轴显示规则
line_chart.update_layout(
    yaxis=dict(
        tickformat='$.2f',  # 设置Y轴显示为带$的两位小数
        title='价格'
    ),
    xaxis=dict(
        tickmode='linear',
        dtick='D1',  # 间隔1天显示一个日期
        tickangle=-45,  # 旋转标签避免重叠
        title='日期'
    )
)

line_chart.show()

补充说明 #

如果需要在DataFrame中同时保留数值型和格式化后的价格列，可以新增列而非修改原列：

df['Price_Formatted'] = df['Price'].map('${:,.2f}'.format)

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