筛选器、表格和统计

您的仪表板可能不只包含图表。让我们看看仪表板的其他常见组件。

筛选器

您可以使用任何标准的 Gradio 表单组件来筛选数据。这可以通过事件监听器或函数即值（function-as-value）语法来实现。我们先来看看事件监听器的方法。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        origin = gr.Dropdown(["All", "DFW", "DAL", "HOU"], value="All", label="Origin")
        destination = gr.Dropdown(["All", "JFK", "LGA", "EWR"], value="All", label="Destination")
        max_price = gr.Slider(0, 1000, value=1000, label="Max Price")

    plt = gr.ScatterPlot(df, x="time", y="price", inputs=[origin, destination, max_price])

    @gr.on(inputs=[origin, destination, max_price], outputs=plt)
    def filtered_data(origin, destination, max_price):
        _df = df[df["price"] <= max_price]
        if origin != "All":
            _df = _df[_df["origin"] == origin]
        if destination != "All":
            _df = _df[_df["destination"] == destination]
        return _df

    
demo.launch()

这将是针对相同演示的函数即值方法。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        origin = gr.Dropdown(["All", "DFW", "DAL", "HOU"], value="All", label="Origin")
        destination = gr.Dropdown(["All", "JFK", "LGA", "EWR"], value="All", label="Destination")
        max_price = gr.Slider(0, 1000, value=1000, label="Max Price")

    def filtered_data(origin, destination, max_price):
        _df = df[df["price"] <= max_price]
        if origin != "All":
            _df = _df[_df["origin"] == origin]
        if destination != "All":
            _df = _df[_df["destination"] == destination]
        return _df

    gr.ScatterPlot(filtered_data, x="time", y="price", inputs=[origin, destination, max_price])
    
demo.launch()

表格和统计

将 gr.DataFrame 和 gr.Label 添加到您的仪表板以显示具体数据。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        gr.Label(len(df), label="Flight Count")
        gr.Label(f"${df['price'].min()}", label="Cheapest Flight")
    gr.DataFrame(df)

    
demo.launch()