You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为Plotly柱状图添加日期范围选择功能,是否可适配旭日图

Plotly日期选择器实现方案及旭日图适配说明

现有实现方案

无需引入第三方额外模块,Plotly生态已有成熟的内置能力支持该需求,可根据你的使用场景二选一:

  • 原生Plotly内置组件:直接通过X轴配置rangeslider和rangeselector即可实现滑动范围选择、快捷日期区间筛选,示例配置代码如下:
import plotly.express as px
import pandas as pd

# 示例df为你的数据集,date列为日期字段,value列为对应数值字段
fig = px.bar(df, x='date', y='value')
fig.update_xaxes(
    rangeslider_visible=True,
    rangeselector=dict(
        buttons=list([
            dict(count=1, label="近1天", step="day", stepmode="backward"),
            dict(count=7, label="近7天", step="day", stepmode="backward"),
            dict(count=1, label="近1月", step="month", stepmode="backward"),
            dict(label="全部", step="all")
        ])
    )
)
fig.show()
  • Dash框架日期选择组件:如果需要精确的日历点选、自定义起止日期筛选,可使用Plotly官方配套的Dash框架,内置dcc.DatePickerSingle(单选日期)和dcc.DatePickerRange(选日期范围)组件,通过回调函数关联图表数据即可实现筛选后动态更新。

旭日图适配说明

上述方案完全适配旭日图(sunburst chart):

两种方案的核心逻辑都是通过日期条件过滤数据集,再将过滤后的数据集传入图表做渲染。柱状图和旭日图仅为最终的可视化渲染形式,筛选逻辑可以完全复用:如果使用原生Plotly,可提前按日期维度拆分数据、绑定按钮点击事件切换数据源;如果使用Dash,仅需要修改回调输出的图表类型为旭日图即可,筛选逻辑无需调整。

示例图

内容的提问来源于stack exchange,提问作者Deb

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 04:42:03