图表与画布 API

import appui


def body():
    rows = [
        {"day": "Mon", "value": 3},
        {"day": "Tue", "value": 7},
        {"day": "Wed", "value": 5},
        {"day": "Thu", "value": 9},
    ]

    return appui.NavigationStack(
        appui.Chart(
            data=rows,
            x="day",
            y="value",
            type="bar",
            color="systemBlue",
        )
        .frame(height=240)
        .padding()
        .navigation_title("Chart")
    )


appui.run(body)

import appui

state = appui.State(selected_day="Wed", detail="")

ROWS = [
    {"day": "Mon", "actual": 7},
    {"day": "Tue", "actual": 11},
    {"day": "Wed", "actual": 9},
    {"day": "Thu", "actual": 14},
]


def selected_row(row):
    state.detail = "未选择" if row is None else f"{row['day']}: {row['actual']}"


def body():
    day = appui.ChartField("day", label="日期", value_type="category")
    actual = appui.ChartField("actual", label="实际值", value_type="number")

    marks = [
        appui.AreaMark(
            day,
            actual,
            interpolation="monotone",
            foreground_style="systemBlue",
            opacity=0.16,
        ),
        appui.LineMark(
            day,
            actual,
            interpolation="monotone",
            line_width=3,
            foreground_style="systemBlue",
        ),
        appui.PointMark(
            day,
            actual,
            symbol="circle",
            symbol_size=34,
            foreground_style="systemBlue",
        ),
        appui.RuleMark(
            y=appui.ChartValue(10, label="目标"),
            dash=[5, 3],
            foreground_style="systemOrange",
            annotation=appui.ChartValue("目标", label="目标"),
            annotation_position="top",
        ),
    ]

    return appui.VStack([
        appui.Chart(
            ROWS,
            marks=marks,
            selection_x="day",
            selection=state.bind.selected_day,
            on_select=selected_row,
            y_domain=[0, 16],
        ).frame(height=260),
        appui.Text(state.detail or "触摸图表查看数据"),
    ], spacing=12).padding()


appui.run(body, state=state)

import appui

ROWS = [
    {"name": "照片", "size": 42},
    {"name": "视频", "size": 31},
    {"name": "其他", "size": 27},
]


def body():
    return appui.Chart(
        ROWS,
        marks=[
            appui.SectorMark(
                "size",
                series="name",
                inner_radius=0.55,
                outer_radius=1.0,
                angular_inset=1.5,
            )
        ],
        selection_x="name",
    ).frame(height=260)


appui.run(body)

import appui

state = appui.State(selected=2.0, detail="")
rows = [
    {"id": "m1", "month": 1.0, "value": 8, "label": "Jan"},
    {"id": "m2", "month": 2.0, "value": 13, "label": "Feb"},
    {"id": "m3", "month": 3.0, "value": 9, "label": "Mar"},
    {"id": "m4", "month": 4.0, "value": 16, "label": "Apr"},
]


def selected_row(row):
    state.detail = row["label"] if row else ""


def body():
    return appui.VStack([
        appui.Chart(
            rows,
            x="month",
            y="value",
            type="line",
            x_type="number",
            interpolation="monotone",
            symbol="circle",
            y_domain=[0, 20],
            selection=state.bind.selected,
            on_select=selected_row,
            scrollable_axes="horizontal",
            visible_domain=3,
            annotation_key="label",
        ).frame(height=240),
        appui.Text(state.detail or "Touch a point"),
    ], spacing=12).padding()


appui.run(body, state=state)

import appui


def body():
    data = [
        {"month": "Jan", "value": 10, "category": "A"},
        {"month": "Jan", "value": 20, "category": "B"},
        {"month": "Feb", "value": 14, "category": "A"},
        {"month": "Feb", "value": 18, "category": "B"},
        {"month": "Mar", "value": 22, "category": "A"},
        {"month": "Mar", "value": 16, "category": "B"},
    ]

    return appui.NavigationStack(
        appui.Chart(
            data=data,
            x="month",
            y="value",
            series="category",
            type="line",
        )
        .frame(height=240)
        .padding()
        .navigation_title("Series")
    )


appui.run(body)

import appui


def make_context():
    ctx = appui.DrawingContext()
    ctx.gradient_rect(0, 0, 240, 140, colors=["systemBlue", "systemTeal"])
    ctx.rounded_rect(20, 20, 200, 100, corner_radius=16, color="systemBackground", fill=True)
    ctx.fill_text("Canvas", 72, 76, color="label", font_size=22)
    ctx.line(40, 98, 200, 98, color="separator", line_width=2)
    return ctx


def body():
    return appui.NavigationStack(
        appui.Canvas(width=240, height=140, context=make_context())
        .frame(width=240, height=140)
        .padding()
        .navigation_title("Canvas")
    )


appui.run(body)

import appui

ctx = appui.DrawingContext()
ctx.fill_rect(0, 0, 10, 10, color="systemRed")
ctx.stroke_rect(10, 0, 10, 10, color="systemBlue", line_width=2)
ctx.fill_circle(50, 50, 20, color="systemGreen")
ctx.line(0, 100, 100, 100, color="systemOrange", line_width=3)
ctx.fill_text("Hi", 5, 105, color="label", font_size=14)
assert len(ctx.commands) == 5

import appui


def body():
    commands = [
        {"move": [40, 10]},
        {"line": [80, 70]},
        {"line": [0, 70]},
        {"close": True},
    ]

    return appui.NavigationStack(
        appui.Path(
            commands=commands,
            fill="systemOrange",
            stroke="label",
            line_width=2,
        )
        .frame(width=100, height=90)
        .padding()
        .navigation_title("Path")
    )


appui.run(body)