mpld3を使用したマルチラインプロットへのツールチップの追加

Question

私はWeb開発の完全な話題です。私はflaskアプリで、matplotlibを使ってpandasデータフレームから複数行のグラフをプロットしていましたが、mpld3経由でデータポイントにツールチップを追加したいと考えています。 mpld3ツールチップexampleは、散布図のみです。複数行のプロットでこれを行う方法は？

data = {'year': [2010, 2011, 2012, 2013, 2014, 2015, 2016,2017, 2018, 2019], 
     'shop1': [10, 21, 20, 10, 23, 30, 31,45, 23, 56], 
     'shop2': [10, 21, 20, 10, 12, 30, 78,45, 23, 56], 
     'shop3': [10, 21, 20, 10, 34, 98, 31,45, 23, 56],} 

df = pd.DataFrame(data) 
df = df.set_index('year') 
fig, ax = plt.subplots() 
df.plot(ax=ax, marker='o') 
plt.grid(True) 

mpld3.display() 

Answer 1

mpld3がラインプロットツールチップを提供しているように見えないため、ポイントツールチップを使用してラインプロットに合わせる必要があります。ここで重要なのは、ポイントツールチップがマトプロットマーカーに依存していることです（説明はhereを参照）。明らかに多くのラインプロットではマーカーが必要ないかもしれないので、以下の私の例ではマーカーの色が消えます。 （私の例は、公式ドキュメントのポイントツールチップのexampleの修正バージョンです）

import matplotlib.pyplot as plt 
import numpy as np 
import pandas as pd 
import mpld3 
from mpld3 import plugins 
import quandl 


# Define some CSS to control our custom labels 
css = """ 
table 
{ 
    border-collapse: collapse; 
} 
th 
{ 
    color: #ffffff; 
    background-color: #000000; 
} 
td 
{ 
    background-color: #cccccc; 
} 
table, th, td 
{ 
    font-family:Arial, Helvetica, sans-serif; 
    border: 1px solid black; 
    text-align: right; 
} 
""" 

fig, ax = plt.subplots() 

df = quandl.get("YALE/SPCOMP") 
ts = df['S&P Composite'] 

labels = [] 
for dt in ts.index: 
    labels.append(str(dt) + '<br/>' + str(ts.loc[dt])) 

lines = plt.plot(ts.index, ts.values, marker='o', ls='-', ms=5, markerfacecolor='None',markeredgecolor='None',) 

ax.set_xlabel('x') 
ax.set_ylabel('y') 
ax.set_title('HTML tooltips', size=20) 

tooltip = plugins.PointHTMLTooltip(lines[0], labels, 
            voffset=10, hoffset=10, css=css) 
plugins.connect(fig, tooltip) 

mpld3.display()