Question

以下示例中的nvd3折线图使用python list作为数据源。但是如何在没有明确说明列的情况下从pandas数据帧中绘制多行，例如在pandas plot中：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的多行图表

1 个答案: