创建图表

Gradio 是创建高度可定制仪表板的一个很好的方式。Gradio 自带了三个原生的绘图组件：gr.LinePlot、gr.ScatterPlot 和 gr.BarPlot。所有这些图表都有相同的 API。让我们来看看如何设置它们。

使用pd.Dataframe创建图表

图表接受一个pandas Dataframe作为其值。图表还接受x和y，它们分别代表x轴和y轴的列名。这里有一个简单的例子：

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

df = pd.DataFrame({
    'height': np.random.randint(50, 70, 25),
    'weight': np.random.randint(120, 320, 25),
    'age': np.random.randint(18, 65, 25),
    'ethnicity': [random.choice(["white", "black", "asian"]) for _ in range(25)]
})

with gr.Blocks() as demo:
    gr.LinePlot(df, x="weight", y="height")

demo.launch()

所有图表都有相同的API，因此你可以将其替换为gr.ScatterPlot：

import gradio as gr
from data import df

with gr.Blocks() as demo:
    gr.ScatterPlot(df, x="weight", y="height")

demo.launch()

数据框中的y轴列应为数值类型，但x轴列可以是字符串、数字、类别或日期时间中的任何类型。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    gr.ScatterPlot(df, x="ethnicity", y="height")

demo.launch()

按颜色分解系列

你可以使用color参数将你的图表分成系列。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    gr.ScatterPlot(df, x="weight", y="height", color="ethnicity")

demo.launch()

如果您希望为系列分配特定颜色，请使用color_map参数，例如gr.ScatterPlot(..., color_map={'white': '#FF9988', 'asian': '#88EEAA', 'black': '#333388'})

颜色列也可以是数值类型。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    gr.ScatterPlot(df, x="weight", y="height", color="age")

demo.launch()

聚合值

你可以使用x_bin和y_aggregate参数将值聚合到组中。如果你的x轴是数值型的，提供一个x_bin将创建一个直方图风格的分箱：

import gradio as gr
from data import df

with gr.Blocks() as demo:
    gr.BarPlot(df, x="weight", y="height", x_bin=10, y_aggregate="sum")

demo.launch()

如果你的x轴是字符串类型，它们将自动作为类别分箱：

import gradio as gr
from data import df

with gr.Blocks() as demo:
    gr.BarPlot(df, x="ethnicity", y="height", y_aggregate="mean")

demo.launch()

选择区域

你可以使用.select监听器来选择图表的区域。点击并拖动下面的图表以选择部分图表。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    plt = gr.LinePlot(df, x="weight", y="height")
    selection_total = gr.Number(label="Total Weight of Selection")

    def select_region(selection: gr.SelectData):
        min_w, max_w = selection.index
        return df[(df["weight"] >= min_w) & (df["weight"] <= max_w)]["weight"].sum()

    plt.select(select_region, None, selection_total)

demo.launch()

你可以结合这个和.double_click监听器，通过改变x_lim来创建一些放大/缩小效果，x_lim用于设置x轴的边界：

import gradio as gr
from data import df

with gr.Blocks() as demo:
    plt = gr.LinePlot(df, x="weight", y="height")

    def select_region(selection: gr.SelectData):
        min_w, max_w = selection.index
        return gr.LinePlot(x_lim=(min_w, max_w)) 

    plt.select(select_region, None, plt)
    plt.double_click(lambda: gr.LinePlot(x_lim=None), None, plt)

demo.launch()

如果您有多个具有相同x列的图表，您的事件监听器可以针对所有其他图表的x限制，以便x轴保持同步。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    plt1 = gr.LinePlot(df, x="weight", y="height")
    plt2 = gr.BarPlot(df, x="weight", y="age", x_bin=10)
    plots = [plt1, plt2]

    def select_region(selection: gr.SelectData):
        min_w, max_w = selection.index
        return [gr.LinePlot(x_lim=(min_w, max_w))] * len(plots) 

    for plt in plots:
        plt.select(select_region, None, plots)
        plt.double_click(lambda: [gr.LinePlot(x_lim=None)] * len(plots), None, plots)

demo.launch()

制作交互式仪表板

看看如何拥有一个交互式仪表板，其中的图表是其他组件的函数。

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        ethnicity = gr.Dropdown(["all", "white", "black", "asian"], value="all")
        max_age = gr.Slider(18, 65, value=65)

    def filtered_df(ethnic, age):
        _df = df if ethnic == "all" else df[df["ethnicity"] == ethnic]
        _df = _df[_df["age"] < age]
        return _df

    gr.ScatterPlot(filtered_df, inputs=[ethnicity, max_age], x="weight", y="height", title="Weight x Height")
    gr.LinePlot(filtered_df, inputs=[ethnicity, max_age], x="age", y="height", title="Age x Height")

demo.launch()

过滤和控制可视化中呈现的数据就是这么简单！