如何平滑Plotly折线图 提升类股票时序数据图表可读性

你当前输出的折线图无法辨识，本质是两个问题叠加导致的：

1. 数据生成逻辑存在bug：初始price定义后，循环过程中从未更新基准价格，所有生成的价格都卡在初始值上下5个单位的极窄区间内，4380个数据点挤在极小的纵轴范围，线条自然重叠成实心色块。另外代码中定义的spacing变量从未被调用，属于冗余代码。
2. 长时序密集数据没有做绘图适配：默认的Plotly渲染配置对数千个点的连续时序没有做优化，既没有方便查看局部的交互能力，SVG渲染模式下密集线条也容易糊成一团。

• 第一步先修正价格生成逻辑，模拟真实股票的随机游走特征，避免数据过度集中：
  把价格循环部分改成每次波动后更新基准价格，加入双向波动和长期漂移项，同时避免价格出现无意义的负数：

  import random
  import plotly.express as px
  import pandas as pd
  
  prices = []
  days = list(range(365*12))
  price = random.uniform(0, 100) # 初始价格设置为更合理的新股发行价区间
  
  for _ in range(365*12):
      # 双向随机波动，轻微正偏模拟股市长期上涨趋势
      price += random.uniform(-2, 2.1)
      price = max(price, 1) # 价格最低为1，避免出现负数
      prices.append(price)
  
  df = pd.DataFrame(list(zip(prices, days)), columns =['Stock Price', 'Days'])
  

• 第二步切换渲染模式，解决密集线条糊块问题：
  绘图时开启WebGL渲染，相比默认的SVG渲染，处理上万个点时速度快10倍以上，线条边缘更清晰不会糊成实心块：

  # 加入render_mode参数指定webgl渲染
  fig = px.line(df, x="Days", y="Stock Price", render_mode="webgl")
  

• 第三步增加交互配置，兼顾整体走势查看和局部数值读取：
  给X轴加范围选择滑块、时间区间快捷切换按钮，同时开启统一悬停提示，不用放大就能精准读到对应日期的价格：

  # 配置X轴交互工具
  fig.update_xaxes(
      rangeslider_visible=True, # 底部范围拖拽滑块
      rangeselector=dict(
          buttons=list([
              dict(count=1, label="1月", step="month", stepmode="backward"),
              dict(count=6, label="半年", step="month", stepmode="backward"),
              dict(count=1, label="1年", step="year", stepmode="backward"),
              dict(step="all", label="全部区间")
          ])
      ),
      dtick=365 # 主刻度按年显示，避免刻度文字挤在一起
  )
  
  # 配置十字准星悬停，鼠标移动时自动显示对应位置的所有数值
  fig.update_layout(
      hovermode="x unified",
      title="12年模拟股票价格走势"
  )
  
  fig.show()
  

• 如果需要静态输出全局走势（不需要交互），可以先对数据降采样：
  按周/月维度聚合平均价格，把绘图点数量从4000+降到几百个，就不会出现线条重叠的问题，示例按月聚合的代码：

  df['Month'] = df['Days'] // 30
  df_month = df.groupby('Month', as_index=False)['Stock Price'].mean()
  fig_static = px.line(df_month, x="Month", y="Stock Price", title="月线静态走势")
  fig_static.show()
  

调整后你既可以看到12年的价格整体走势轮廓，也可以通过快捷按钮、滑块放大任意局部时间段的波动细节，鼠标悬停就能读到精准价格，完全不会再出现整图糊成黑块的问题。

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