时间图

创建带有时间 X 轴的可视化是一个常见的用例。让我们深入了解！

使用 pd.Dataframe 创建绘图

时间图需要在 X 轴上有一个日期时间列。这是一个包含航班数据的简单示例。

import gradio as gr
import pandas as pd
import numpy as np
import random

from datetime import datetime, timedelta
now = datetime.now()

df = pd.DataFrame({
    'time': [now - timedelta(minutes=5*i) for i in range(25)],
    'price': np.random.randint(100, 1000, 25),
    'origin': [random.choice(["DFW", "DAL", "HOU"]) for _ in range(25)],
    'destination': [random.choice(["JFK", "LGA", "EWR"]) for _ in range(25)],
})

with gr.Blocks() as demo:
    gr.LinePlot(df, x="time", y="price")
    gr.ScatterPlot(df, x="time", y="price", color="origin")

demo.launch()

按时间聚合

您可能希望按时间桶对数据进行分箱。可以使用带有“s”、“m”、“h”或“d”等字符串后缀的 `x_bin` 参数，例如“15m”或“1d”。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    plot = gr.BarPlot(df, x="time", y="price", x_bin="10m")

    bins = gr.Radio(["10m", "30m", "1h"], label="Bin Size")
    bins.change(lambda bins: gr.BarPlot(x_bin=bins), bins, plot)

demo.launch()

日期时间组件

您可以使用 `gr.DateTime` 来接受输入日期时间数据。这对于定义数据 X 轴范围的绘图非常有用。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        start = gr.DateTime("now - 24h")
        end = gr.DateTime("now")
        apply_btn = gr.Button("Apply")
    plot = gr.LinePlot(df, x="time", y="price")

    apply_btn.click(lambda start, end: gr.BarPlot(x_lim=[start, end]), [start, end], plot)
    
demo.launch()

请注意，`gr.DateTime` 可以接受完整的日期时间字符串，或者使用 `now - [0-9]+[smhd]` 格式的简写来指代过去的时间。

您通常会有许多时间图，在这种情况下，您希望保持 X 轴同步。`DateTimeRange` 自定义组件可以使一组日期时间图保持同步，并且还使用绘图的 `.select` 监听器，让您在缩放绘图时保持图表同步。

由于它是一个自定义组件，您首先需要运行 `pip install gradio_datetimerange`。然后运行以下代码：

import gradio as gr
from gradio_datetimerange import DateTimeRange
from data import df

with gr.Blocks() as demo:
    daterange = DateTimeRange(["now - 24h", "now"])
    plot1 = gr.LinePlot(df, x="time", y="price")
    plot2 = gr.LinePlot(df, x="time", y="price", color="origin")
    daterange.bind([plot1, plot2])

demo.launch()

尝试在图中缩放，看看 DateTimeRange 如何更新。所有图表的 `x_lim` 都同步更新。组件中还有一个“返回”链接，可以帮助您快速放大和缩小。

实时数据

在许多情况下，您处理的是实时数据，而不是静态数据框。在这种情况下，您可以使用 `gr.Timer()` 定期更新绘图。假设有一个 `get_data` 方法可以获取最新的数据框：

with gr.Blocks() as demo:
    timer = gr.Timer(5)
    plot1 = gr.BarPlot(x="time", y="price")
    plot2 = gr.BarPlot(x="time", y="price", color="origin")

    timer.tick(lambda: [get_data(), get_data()], outputs=[plot1, plot2])

您也可以使用 `every` 简写将 `Timer` 附加到具有函数值的组件。

with gr.Blocks() as demo:
    timer = gr.Timer(5)
    plot1 = gr.BarPlot(get_data, x="time", y="price", every=timer)
    plot2 = gr.BarPlot(get_data, x="time", y="price", color="origin", every=timer)