Question

我是网络开发的完整菜鸟。我正在开发一个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不提供线图工具提示，因此您必须使用点工具提示并将其调整为线图。这里重要的观察是点工具提示依赖于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()

使用mpld3将工具提示添加到多线图

1 个答案: