如何在echarts的x轴按日期排列

Posted 2023-05-08

参考技术A 通过记录生活、记录文化、记录历史，来实现自己传承文化的梦想。时间轴正是实现梦想的基础。想要传承，必须先有系统、完整的记录。而时间轴就是依据文化分类和时间把事物归类和排序，以最适合的形态展示给用户。记录年华岁月中的故事，让时间和空间不再是我们的障碍，只需一条线，就能够回到从前。

我无法让 x 轴按我想要的方式工作

【中文标题】我无法让 x 轴按我想要的方式工作

【英文标题】：I can't get the x-axis to work the way I want

【发布时间】：2021-11-29 15:50:57

【问题描述】：

我正在使用 px.bar 来绘制每个交易日的盈亏。问题是情节正在改变日期的顺序。有没有办法强制情节保持数据框的顺序？我试图在没有指定颜色的情况下进行绘图，然后返回并更新颜色，但我没有任何运气。

这是我绘制数据框的代码行

fig1 = px.bar(dfff, x="DATE", y="Profit/Loss", color = "Marker", color_discrete_map = "identity").update_layout(showlegend=False, title_x=0.5)

这是数据框。

     DATE  Profit/Loss Marker  Cumulative_PnL  Daily_Volume  WinRate WinStreak  CumulativeWinRate  
 08/16/21     -58.1995    red        -58.1995      604.0000  80.0000         0            80.0000    
 08/17/21      -4.7700    red        -62.9695        4.0000  50.0000         0            71.4286    
 08/18/21      31.4984  green        -31.4711     1908.0000 100.0000         1            84.6154    
 08/20/21      49.6200  green         18.1489     1006.0000  50.0000         2            76.4706    
 08/23/21    -930.1800    red       -912.0311      712.0000  50.0000         0            66.6667   
 08/24/21      99.1000  green       -812.9311      306.0000 100.0000         1            70.9677    
 08/25/21      -0.6400    red       -813.5711      332.0000  60.0000         0            67.3913    
 08/26/21     -50.0300    red       -863.6011     2556.0000  66.6667         0            67.3077    
 08/27/21      -9.9100    red       -873.5111       38.0000  81.8182         0            69.8413    
 08/30/21       7.8500  green       -865.6611      424.0000  91.6667         1            73.3333   
 08/31/21       1.0000  green       -864.6611       40.0000 100.0000         2            74.0260

【参考方案1】：

您的DATE 列属于字符串类型。您需要将其转换为日期时间类型，以便plotly 正确识别：

df['DATE'] = pd.to_datetime(df.DATE, format='%m/%d/%y')

之后它应该正确绘制：

fig1 = px.bar(df, x="DATE", y="Profit/Loss", color = "Marker", color_discrete_map = "identity").update_layout(showlegend=False, title_x=0.5)
fig1.show()

另见full example