如何在Plotly中绘制X轴为日期范围的柱状图？

需求说明 #

需要绘制柱状图，X轴展示startDate与endDate组成的日期范围，Y轴展示requestCount；希望将当前X轴的字符串拼接格式改为原生日期格式，同时保留图表的缩放交互功能。

原始数据 #

[
  {
    "startDate": 1666255095626,
    "endDate": 1666341495626,
    "requestCount": 3
  },
  {
    "startDate": 1666168695626,
    "endDate": 1666255095626,
    "requestCount": 5
  },
  {
    "startDate": 1666082295626,
    "endDate": 1666168695626,
    "requestCount": 2
  },
  {
    "startDate": 1665995895626,
    "endDate": 1666082295626,
    "requestCount": 5
  },
  {
    "startDate": 1665909495626,
    "endDate": 1665995895626,
    "requestCount": 1
  }
]

当前配置（字符串X轴） #

[
  {
    "x": [
      "1666255095626-1666341495626",
      "1666168695626-1666255095626",
      "1666082295626-1666168695626",
      "1665995895626-1666082295626",
      "1665909495626-1665995895626"
    ],
    "y": [3,5,2,5,1],
    "type": "bar",
    "marker": {"color": "", "colorscale": null, "size": "", "line": {"color": ""}},
    "name": "",
    "line": {"shape": "linear"},
    "hoverinfo": "",
    "transforms": []
  }
]

解决方案 #

完全可以实现日期格式X轴并保留缩放功能，核心是利用Plotly的原生日期轴支持，将时间戳转换为可识别的日期格式，并配置柱子宽度匹配日期区间时长。

关键修改点 #

1. 转换时间戳为日期格式：将毫秒级时间戳转为ISO字符串（Plotly.js）或datetime对象（Plotly Python），Plotly会自动识别为日期类型。
2. 设置柱子宽度：每个柱子的宽度对应endDate - startDate的时长（毫秒/秒，根据不同Plotly版本调整单位），让柱子精准匹配对应的日期区间。
3. 开启日期轴交互：在布局中设置xaxis.type = "date"，原生支持缩放、平移，还可添加rangeslider或rangeselector增强交互体验。

修改后的配置示例（Plotly.js） #

{
  "data": [
    {
      "x": [
        "2022-10-19T02:38:15.626Z",
        "2022-10-18T02:38:15.626Z",
        "2022-10-17T02:38:15.626Z",
        "2022-10-16T02:38:15.626Z",
        "2022-10-15T02:38:15.626Z"
      ],
      "y": [3,5,2,5,1],
      "width": [86400000, 86400000, 86400000, 86400000, 86400000],
      "type": "bar",
      "marker": {"color": "#1f77b4"},
      "hoverinfo": "x+y+text",
      "text": [
        "2022-10-19 至 2022-10-20",
        "2022-10-18 至 2022-10-19",
        "2022-10-17 至 2022-10-18",
        "2022-10-16 至 2022-10-17",
        "2022-10-15 至 2022-10-16"
      ]
    }
  ],
  "layout": {
    "xaxis": {
      "type": "date",
      "title": "日期范围",
      "rangeslider": {"visible": true},
      "rangeselector": {
        "buttons": [
          {"count": 1, "label": "1天", "step": "day", "stepmode": "backward"},
          {"count": 5, "label": "5天", "step": "day", "stepmode": "backward"},
          {"step": "all"}
        ]
      }
    },
    "yaxis": {"title": "请求数量"},
    "title": "按日期范围统计的请求数量"
  }
}

修改后的代码示例（Plotly Python） #

import plotly.graph_objects as go
from datetime import datetime

# 原始数据
data = [
  {"startDate": 1666255095626, "endDate": 1666341495626, "requestCount": 3},
  {"startDate": 1666168695626, "endDate": 1666255095626, "requestCount": 5},
  {"startDate": 1666082295626, "endDate": 1666168695626, "requestCount": 2},
  {"startDate": 1665995895626, "endDate": 1666082295626, "requestCount": 5},
  {"startDate": 1665909495626, "endDate": 1665995895626, "requestCount": 1}
]

# 转换数据格式
start_dates = [datetime.fromtimestamp(d["startDate"]/1000) for d in data]
# Plotly Python中bar的width单位为秒
widths = [(d["endDate"] - d["startDate"])/1000 for d in data]
y_values = [d["requestCount"] for d in data]
hover_texts = [
    f"{datetime.fromtimestamp(d['startDate']/1000).strftime('%Y-%m-%d')} 至 {datetime.fromtimestamp(d['endDate']/1000).strftime('%Y-%m-%d')}"
    for d in data
]

# 生成图表
fig = go.Figure(data=[go.Bar(
    x=start_dates,
    y=y_values,
    width=widths,
    hovertext=hover_texts,
    hoverinfo="y+hovertext",
    marker_color="#1f77b4"
)])

# 配置布局
fig.update_layout(
    xaxis=dict(
        type="date",
        title="日期范围",
        rangeslider=dict(visible=True),
        rangeselector=dict(
            buttons=list([
                dict(count=1, label="1天", step="day", stepmode="backward"),
                dict(count=5, label="5天", step="day", stepmode="backward"),
                dict(step="all")
            ])
        )
    ),
    yaxis=dict(title="请求数量"),
    title="按日期范围统计的请求数量"
)

fig.show()

效果说明 #

• X轴变为原生日期轴，支持鼠标拖拽缩放、滚轮缩放，以及rangeselector的快速日期范围切换。
• 每个柱子精准对应startDate到endDate的区间，视觉上更直观。
• 悬停时可查看完整的日期范围和请求数量信息。

内容的提问来源于stack exchange，提问作者Abdul K Shahid