Plotly图表大内容悬停不显示问题及滚动条实现咨询

核心方案 #

直接通过自定义悬停模板的HTML样式，给日志内容容器设置固定最大高度和垂直滚动属性，让超出部分可滚动查看，完全在Plotly配置内实现，无需依赖外部工具。

具体实现步骤 #

1. 调整日志内容的拼接逻辑
   保留原有按LOG_NAME分组的统计逻辑，仅在拼接日志内容时，给外层包裹带CSS样式的<div>标签，限制高度并启用滚动：

   import pandas as pd
   import plotly.express as px
   
   # 读取日志CSV文件
   df = pd.read_csv("server_logs.csv")
   
   # 按LOG_NAME分组计算基础统计数据
   group_stats = df.groupby("LOG_NAME").agg(
       start_time=("DATETIME", "min"),
       end_time=("DATETIME", "max"),
       log_count=("LOG_CONTENT", "count")
   ).reset_index()
   
   # 拼接带滚动样式的日志内容（关键修改）
   def format_logs(group):
       # 拼接每条日志的时间与内容
       log_lines = [f"{row['DATETIME']}: {row['LOG_CONTENT']}" for _, row in group.iterrows()]
       # 外层包裹带滚动样式的div
       return f'<div style="max-height: 300px; overflow-y: auto; white-space: pre-wrap;">{"<br>".join(log_lines)}</div>'
   
   log_contents = df.groupby("LOG_NAME").apply(format_logs).reset_index(name="full_logs")
   
   # 合并统计数据与格式化后的日志内容
   final_df = pd.merge(group_stats, log_contents, on="LOG_NAME")
   

2. 修改悬停模板配置
   生成时间轴图表时，直接引用带样式的日志内容字段，自定义悬停弹窗的显示逻辑：

   # 生成时间轴图表
   fig = px.timeline(
       final_df,
       x_start="start_time",
       x_end="end_time",
       y="LOG_NAME",
       hover_data={"full_logs": True}
   )
   
   # 自定义悬停模板，隐藏默认冗余字段
   fig.update_traces(
       hovertemplate='<b>日志文件:</b> %{y}<br><br><b>日志内容:</b><br>%{customdata[0]}<extra></extra>'
   )
   
   # 导出为HTML文件
   fig.write_html("server_log_timeline.html")
   

关键样式说明 #

• max-height: 300px：设置悬停弹窗内容的最大高度，可根据屏幕尺寸调整（小屏幕可设为200px）
• overflow-y: auto：当内容高度超过最大值时，自动显示垂直滚动条
• white-space: pre-wrap：保留日志原有的换行与空格，保证内容格式可读性

额外优化建议 #

• 针对100+行的超大日志，可在拼接时添加日志条数提示，比如在div开头插入共{log_count}条日志<br>，让用户直观了解内容规模
• 可将max-height改为相对单位（如80vh），让弹窗高度自适应屏幕可用空间

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