如何使用Plotly复刻Last.FM的小时分布交互式时钟图表？

完全可以实现，核心是基于Plotly的极坐标柱状图做参数适配，就能做出和示例一致的交互式时钟分布效果，不需要依赖其他第三方可视化库。
#

核心实现逻辑 #

• 把极坐标的角度轴和24小时做映射：0点固定在正上方，刻度顺时针排列，每个小时对应15度扇区，完全匹配日常时钟的刻度逻辑
• 极坐标的径向长度对应各小时的播放计数，隐藏径向多余刻度保证视觉简洁
• 用黄-橙-红渐变色映射计数高低，和参考图的视觉风格对齐
• 原生支持悬浮交互，鼠标移到对应扇区就能显示具体小时和播放次数

完整代码 #

你已经做好的小时计数统计可以直接用，注意要先按小时值从0到23排序，避免扇区错位：

import plotly.graph_objects as go
import pandas as pd

# 此处为你提供的小时统计数据，如果你已经生成了listeningHour变量可以直接替换这部分
listeningHour = pd.DataFrame([
    [17,16874],[18,16703],[16,14741],[19,14525],[23,14440],
    [22,13455],[20,13119],[21,12766],[14,11605],[13,11575],
    [15,11491],[0,10220],[12,7793],[1,6057],[9,3774],
    [11,3476],[10,1674],[8,1626],[2,1519],[3,588],
    [6,500],[7,163],[4,157],[5,26]
], columns=['hour','counts'])
# 必须做排序：按小时0-23升序排列，保证极坐标下扇区位置正确
listeningHour = listeningHour.sort_values('hour').reset_index(drop=True)

# 角度转换：适配Plotly极坐标默认规则（0度在正右、逆时针递增），转为时钟逻辑（0点在正上、顺时针递增）
theta = [(90 - hour * 15) % 360 for hour in listeningHour['hour']]
bar_width = 360 / 24  # 每个小时扇区占15度宽度

fig = go.Figure()
fig.add_trace(go.Barpolar(
    r=listeningHour['counts'],
    theta=theta,
    width=bar_width,
    marker=dict(
        color=listeningHour['counts'],
        colorscale='YlOrRd',  # 黄橙红渐变，匹配参考图配色
        line=dict(color='white', width=1)  # 扇区之间加白色分隔线
    ),
    hovertemplate='<b>%{customdata[0]}点</b><br>播放次数：%{r}<extra></extra>',
    customdata=listeningHour[['hour']]
))

# 布局调整，匹配时钟样式
fig.update_layout(
    polar=dict(
        radialaxis=dict(
            showticklabels=False,
            showgrid=False,
            range=[0, listeningHour['counts'].max()*1.1]  # 顶部留10%边距避免内容贴边
        ),
        angularaxis=dict(
            tickvals=[(90 - h*15) % 360 for h in range(24)],
            ticktext=[str(h) for h in range(24)],
            direction='clockwise',  # 角度顺时针增长
            showgrid=True,
            gridcolor='#f0f0f0'
        ),
        bgcolor='white'
    ),
    margin=dict(l=20, r=20, t=40, b=20),
    showlegend=False,
    title=dict(text='24小时听歌记录分布', x=0.5)
)

fig.show()

调整说明 #

• 如果要完全匹配参考图的深色风格，只需要把polar.bgcolor改为深灰色，同时把网格线、刻度文字颜色调整为浅色系即可
• 配色可以通过修改colorscale参数替换为任意你需要的色阶
• 不需要额外写交互逻辑，Plotly原生支持图面缩放、悬浮提示、图片导出等交互操作

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