使用 nvd3 来自数据框的多线图

Question

下例中的 nvd3 折线图使用 python 列表作为数据源。但是如何在不明确说明列的情况下从 pandas 数据帧绘制多线，即在 pandas 图中：df.plot() df 可以包含 x 列。

from nvd3 import lineChart

# Open File for test
output_file = open('test_lineChart.html', 'w')
# ---------------------------------------
type = "lineChart"
chart = lineChart(name=type, x_is_date=False, x_axis_format="AM_PM")

xdata = list(range(0, 24))
ydata = [0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 4, 3, 3, 5, 7, 5, 3, 16, 6, 9, 15, 4, 12]
ydata2 = [9, 8, 11, 8, 3, 7, 10, 8, 6, 6, 9, 6, 5, 4, 3, 10, 0, 6, 3, 1, 0, 0, 0, 1]

kwargs1 = {'color': 'black'}
kwargs2 = {'color': 'red'}
extra_serie = {"tooltip": {"y_start": "There is ", "y_end": " calls"}}
chart.add_serie(y=ydata, x=xdata, name='sine', extra=extra_serie, **kwargs1)
extra_serie = {"tooltip": {"y_start": "", "y_end": " min"}}
chart.add_serie(y=ydata2, x=xdata, name='cose', extra=extra_serie, **kwargs2)

chart.buildhtml()

output_file.write(chart.htmlcontent)

# close Html file
output_file.close()

如何使用 nvd3 从这个数据框中绘图：

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

Answer 1

IIUC，chart 将数据作为 list，因此您必须像这样将 index 和 column 数据转换为 list （假设你的 column 名字分别是 col1 和 col2：

def plot_nvd3(df, ydata='col1', ydata2='col2'):
    # Open File for test
    output_file = open('test_lineChart.html', 'w')
    # ---------------------------------------
    type = "lineChart"
    chart = lineChart(name=type, x_is_date=False, x_axis_format="AM_PM")

    xdata = df.index.tolist()
    ydata = df[ydata].tolist()
    ydata2 = df[ydata2].tolist()

    kwargs1 = {'color': 'black'}
    kwargs2 = {'color': 'red'}
    extra_serie = {"tooltip": {"y_start": "There is ", "y_end": " calls"}}
    chart.add_serie(y=ydata, x=xdata, name='sine', extra=extra_serie, **kwargs1)
    extra_serie = {"tooltip": {"y_start": "", "y_end": " min"}}
    chart.add_serie(y=ydata2, x=xdata, name='cose', extra=extra_serie, **kwargs2)

    chart.buildhtml()

    output_file.write(chart.htmlcontent)

    # close Html file
    output_file.close()

用法为：

plot_nvd3(df, 'col1', 'col2')

我还没有检查 nvd3 如何与 DateTimeIndex 一起工作，但万一你的 df = df.set_index('datetime') 结果是一个。

使用 nvd3 来自数据框的多线图

Multiline chart from dataframe using nvd3

python

pandas

nvd3.js