如何在Dash仪表板中动态调整Plotly直方图的bin大小？

python

2024-03-10 18:29:37

在Dash仪表板中精细调整Plotly直方图

问题

在Plotly直方图中，放大时bin大小保持不变。当我们希望在放大时更改bin大小以获得更详细的视图时，这可能会造成限制。

解决方案

我们可以使用一个回调函数来动态调整bin大小，具体取决于x轴的范围。

步骤：

创建直方图： 使用go.FigureWidget创建包含直方图痕迹的FigureWidget。
获取痕迹引用： 存储直方图痕迹的引用，以便可以动态更新其数据。
定义回调函数： 编写一个函数，当x轴范围发生变化时调用该函数。该函数应该：
- 过滤数据以获取在选定范围内的x值。
- 将过滤后的数据分配给直方图的x属性。
连接回调： 将回调函数连接到x轴的'range'事件。

实现

Python代码：

import plotly.graph_objs as go
import numpy as np
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash

# 生成数据集
x = np.random.randn(5000)

# 创建FigureWidget
fig = go.FigureWidget(
    [go.Histogram(x=x)],
    go.Layout(
        xaxis={'range': [-4, 4],
               'title': 'x'}))

# 获取直方图痕迹引用
hist = fig.data[0]

# 定义回调函数
def handle_zoom(xaxis, xrange):
    filtered_x = x[np.logical_and(xrange[0] <= x, x <= xrange[1])]
    hist.x = filtered_x  # 更新直方图的x数据

# 连接回调
@app.callback(
    Output('first-Graph', 'figure'),
    [Input('first-Graph', 'relayoutData')]
)
def update_figure(relayoutData):
    if relayoutData is None:
        return fig
    else:
        if 'xaxis.range[0]' in relayoutData:
            handle_zoom(relayoutData['xaxis.range[0]'], relayoutData['xaxis.range[1]'])
        return fig

# Dash应用程序
app = dash.Dash(__name__)
app.layout = html.Div([
    html.Div([
        dcc.Graph(id='first-Graph', figure=fig)
    ]),
])

# 运行应用程序
if __name__ == '__main__':
    app.run_server(mode='inline')