mpld3을 사용하여 멀티 라인 플롯에 툴팁 추가하기

Question

웹 개발에 대한 완벽한 멍청한 질문입니다. 필자는 flask 응용 프로그램에서 matplotlib을 사용하여 팬더 데이터 프레임의 여러 줄 차트를 표시했지만, 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에서 선 플롯 툴팁을 제공하는 것처럼 보이지 않으므로 포인트 툴팁을 사용하여 선 플롯에 맞게 조정해야합니다. 중요한 요지는 포인트 툴팁이 matplotlib 마커를 사용한다는 것입니다 (토론 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()