55442

[code]

    TOOLTIPS = [
        ("(時刻,工程)", "($x, $y)"),
    ]
    
[/code]

でtooltipの設定を行いました。  
`p = figure(tooltips=TOOLTIPS)`でグラフ設定を行っています。

[code]

    p.line(・・・・)
    show(p)
    
[/code]

でグラフは作れました。問題は、TOOLTIPSの$xです。  
x軸のデータの型は、datetime型です。$xでTOOLTIPするととても大きな値が出てしまいます。  
$xをうまく変更すれば、2019-05-31 21:59 といった表示に変更できないものでしょうか？  
ご指導よろしくお願いいたします。

以下にソースコード追加

[code]

    from datetime import datetime as dt
    from datetime import timedelta as dtdelta
    
    import pandas
    
    from bokeh.plotting import figure, output_file, show, reset_output
    
    # 出力設定
    reset_output()
    
    #ツールチップ
    output_file("graph.html")
    TOOLTIPS = [
        ("(時刻,工程)", "($x, $y)"),
    ]
    
    p = figure(tooltips=TOOLTIPS, plot_width=1200, plot_height=1200,x_axis_location="above" ,x_axis_type = "datetime",x_axis_label="時刻", y_axis_label="工程")
    
    x_dtlist1 = [dt(2019,2,1,8,15,00),dt(2019,2,1,8,30,00),dt(2019,2,1,8,35,00),dt(2019,2,1,8,40,00),dt(2019,2,1,8,45,00)]
    x_dtlist2 = [dt(2019,2,1,9,15,00),dt(2019,2,1,9,30,00),dt(2019,2,1,9,35,00),dt(2019,2,1,9,40,00),dt(2019,2,1,9,45,00)]
    x_dtlist3 = [dt(2019,2,1,10,15,00),dt(2019,2,1,10,30,00),dt(2019,2,1,10,35,00),dt(2019,2,1,10,40,00),dt(2019,2,1,10,45,00)]
    y_dtlist = [0,1,1,2,2]
    p.line(x_dtlist1, y_dtlist)
    p.line(x_dtlist2, y_dtlist)
    p.line(x_dtlist3, y_dtlist)
    show(p)
    
[/code]

### 環境

  * bokeh v1.0.2


CC BY-SA 4.0
2019-05-31T13:08:02.163
55411
2019-06-02T21:15:34.000
2019-06-02T21:15:34.000
19524
34450
question
python bokeh
Bokeh の tooltip の設定の仕方を教えてください


### 解決方法

以下のコードで、`2019-05-31 21:59`というフォーマットで日時をHoverToolに表示できます。

[code]

    import pandas as pd
    import datetime
    
    from bokeh.plotting import figure, output_file, show, reset_output
    from bokeh.plotting import ColumnDataSource
    from bokeh.models import HoverTool
    
    # データ作成
    df = pd.DataFrame([{"x":1, "y":2, "date": datetime.datetime.now()}])
    
    hover_tool = HoverTool(
        tooltips=[
            ("(x,y)", "($x, $y)"),
            ( "date", "@date{%F %R}"), # 'date'フィールドを'%Y-%m-%d %H:%M'でフォーマット
        ],
        formatters={
            'date': 'datetime', # 'data'フィールドを'datetime'フォーマットにする
        },
        mode='mouse'
    )
    
    source = ColumnDataSource(data=df)
    p = figure(tools=[hover_tool], x_axis_label="x", y_axis_label="y")
    p.circle(x="x", y="y", source=source)
    show(p)
    from bokeh.plotting import figure, output_file, show, reset_output
    from bokeh.plotting import ColumnDataSource
    from bokeh.models import HoverTool
    
    # データ作成
    df = pd.DataFrame([{"x":1, "y":2, "date": datetime.datetime.now()}])
    
    hover_tool = HoverTool(
        tooltips=[
            ("(x,y)", "($x, $y)"),
            ( "date", "@date{%F %R}"), # 'date'フィールドを'%Y-%m-%d %H:%M'でフォーマット
        ],
        formatters={
            'date': 'datetime', # 'data'フィールドを'datetime'フォーマットにする
        },
        mode='mouse'
    )
    
    source = ColumnDataSource(data=df)
    p = figure(tools=[hover_tool], x_axis_label="x", y_axis_label="y")
    p.circle(x="x", y="y", source=source)
    show(p)
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/c1Ino.png)](https://i.stack.imgur.com/c1Ino.png)

### 解説

> $xでTOOLTIPするととても大きな値が出てしまいます。

`$x`はカーソルのx座標値を表すので、データの値を表示されません。

> x-coordinate under the cursor in data space

<https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html> 引用

`HoverTool`の生成部分では、「`date`という列が、`datetime`フォーマットで、具体的には"%F %R"である」ことを宣言しています。  
"%F"や"%R"の意味は[DatetimeTickFormatter](https://bokeh.pydata.org/en/latest/docs/reference/models/formatters.html#bokeh.models.formatters.DatetimeTickFormatter)で定義されています。

詳しくは以下を参照してください。  
<https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html#formatting-
tooltip-fields>

### 実行環境

  * Python 3.7
  * bokeh 1.1.0
  * pandas 0.24.2

### 追記：x軸を日付にしたグラフ

[code]

    df = pd.DataFrame([{"date":datetime.date(2019,5,1), "sales": 100},{"date":datetime.date(2019,6,1), "sales": 200}])
    source = ColumnDataSource(data=df)
    
    hover_tool = HoverTool(
        tooltips=[
            ("(x,y)", "($x, $y)"),
            ("date", "@date{%F %R}"), # '%Y-%m-%d %H:%M'
            ("sales", "@sales")
        ],
        formatters={
            'date': 'datetime', # 'data'フィールドを'datetime'フォーマットにする
        },
        mode='mouse'
    )
    
    p = figure(x_axis_label="date", y_axis_label="sales", x_axis_type="datetime", tools=[hover_tool])
    p.line(x="date", y="sales", source=source)
    
    show(p)
    
[/code]

### 質問者様のコードを修正

[code]

    hover_tool = HoverTool(
        tooltips=[
            ("(時刻,工程)", "(@x{%F %R}, $y)"),
        ],
        formatters={
            'x': 'datetime',
        },
        mode='mouse'
    )
    
    p = figure(tools=[hover_tool], plot_width=1200, plot_height=1200,x_axis_location="above" ,x_axis_type = "datetime",x_axis_label="時刻", y_axis_label="工程")
    
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/dbBPi.png)](https://i.stack.imgur.com/dbBPi.png)


CC BY-SA 4.0
2019-06-01T16:08:19.410
55442
2019-06-02T11:05:23.117
2019-06-02T11:05:23.117
19524
19524
55411
answer