用于 plotly 滑块小部件的悬停工具 (python)

Question

我正在使用 python 3.6.5 和 plotly 3.9.0 创建交互式折线图，用户可以使用游侠幻灯片更改范围。

我想向范围滑块添加一个悬停工具，这样当用户移动滑块时，悬停图标会在用户释放鼠标之前显示新的日期范围。

我认为这是散景的默认设置，但我已经放弃了，转而使用 plotly-dash。

这可以做到吗？

下面是我正在尝试做的最低工作示例。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import plotly.plotly as py

from datetime import datetime
import pandas as pd
import numpy as np

np.random.seed(10)
df = pd.DataFrame({
    'date':pd.date_range(start='1/1/2000', periods=200),
    'x': np.random.choice(range(100),200)
})

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(
        id='graph',
    ),

    dcc.RangeSlider(
        id='slider',
        min = df['date'].min().timestamp(),
        max = df['date'].max().timestamp(),
        value=[df.iloc[-101]['date'].timestamp(), df.iloc[-1]['date'].timestamp()]
    )

])


@app.callback(
    dash.dependencies.Output('graph','figure'),
    [dash.dependencies.Input('slider','value')])

def update_figure(value):
    lBound = pd.to_datetime(value[0], unit='s')
    uBound = pd.to_datetime(value[1], unit='s')
    filteredData = df.loc[(df['date']>=lBound) & (df['date']<=uBound)]
    fig = [
        go.Scatter(
            x=filteredData['date'],
            y=filteredData['x'],
            mode='lines',
            name='xxxx'
        )
    ]

    layout = go.Layout(
                xaxis={'title': ' '},
                yaxis={'title': 'per cent'},
                hovermode='closest')

    return {'data':fig,'layout':layout}


if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

目前 slider 上的 hovering 没有 dash 上的 plotly 的功能。
您可以查看 Slider and RangeSlider.

的文档

我知道这不是你想要的，但是使用 marks 让滑块知道位置会更容易。

dcc.RangeSlider(
        id='slider',
        min = df['date'].min().timestamp(),
        max = df['date'].max().timestamp(),
        value=[df.iloc[-101]['date'].timestamp(), df.iloc[-1]['date'].timestamp()],
        marks={
        955411200: {'label': '2000-04-11', 'style': {'color': '#77b0b1'}},
        959644800: {'label': '2000-05-30'},
        957484800: {'label': '2000-05-05'},
        961804800: {'label': '2000-06-24', 'style': {'color': '#f50'}}
    }

    )

把你的dcc.RangeSlider改成这个。这可能比没有悬停要好。

否则你可以使用 Slider Widget 只是 plotly，但仅限于 jupyter。

用于 plotly 滑块小部件的悬停工具 (python)

Hover tool for plotly slider widget (python)

python

plotly

plotly-dash