条形图

绘制条形图。

示例

条形图 1

import flet as ft

def main(page: ft.Page):
    chart = ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=40,
                        width=40,
                        color=ft.Colors.AMBER,
                        tooltip="苹果",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=100,
                        width=40,
                        color=ft.Colors.BLUE,
                        tooltip="蓝莓",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=30,
                        width=40,
                        color=ft.Colors.RED,
                        tooltip="樱桃",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=60,
                        width=40,
                        color=ft.Colors.ORANGE,
                        tooltip="橙子",
                        border_radius=0,
                    ),
                ],
            ),
        ],
        border=ft.border.all(1, ft.Colors.GREY_400),
        left_axis=ft.ChartAxis(
            labels_size=40, title=ft.Text("水果供应量"), title_size=40
        ),
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(
                    value=0, label=ft.Container(ft.Text("苹果"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=1, label=ft.Container(ft.Text("蓝莓"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=2, label=ft.Container(ft.Text("樱桃"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=3, label=ft.Container(ft.Text("橙子"), padding=10)
                ),
            ],
            labels_size=40,
        ),
        horizontal_grid_lines=ft.ChartGridLines(
            color=ft.Colors.GREY_300, width=1, dash_pattern=[3, 3]
        ),
        tooltip_bgcolor=ft.Colors.with_opacity(0.5, ft.Colors.GREY_300),
        max_y=110,
        interactive=True,
        expand=True,
    )

    page.add(chart)

ft.app(main)

条形图 2

import flet as ft

class SampleRod(ft.BarChartRod):
    def __init__(self, y: float, hovered: bool = False):
        super().__init__()
        self.hovered = hovered
        self.y = y

    def _before_build_command(self):
        self.to_y = self.y + 1 if self.hovered else self.y
        self.color = ft.Colors.YELLOW if self.hovered else ft.Colors.WHITE
        self.border_side = (
            ft.BorderSide(width=1, color=ft.Colors.GREEN_400)
            if self.hovered
            else ft.BorderSide(width=0, color=ft.Colors.WHITE)
        )
        super()._before_build_command()

    def _build(self):
        self.tooltip = str(self.y)
        self.width = 22
        self.color = ft.Colors.WHITE
        self.bg_to_y = 20
        self.bg_color = ft.Colors.GREEN_300


def main(page: ft.Page):
    def on_chart_event(e: ft.BarChartEvent):
        for group_index, group in enumerate(chart.bar_groups):
            for rod_index, rod in enumerate(group.bar_rods):
                rod.hovered = e.group_index == group_index and e.rod_index == rod_index
        chart.update()

    chart = ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[SampleRod(5)],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[SampleRod(6.5)],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[SampleRod(5)],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[SampleRod(7.5)],
            ),
            ft.BarChartGroup(
                x=4,
                bar_rods=[SampleRod(9)],
            ),
            ft.BarChartGroup(
                x=5,
                bar_rods=[SampleRod(11.5)],
            ),
            ft.BarChartGroup(
                x=6,
                bar_rods=[SampleRod(6)],
            ),
        ],
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(value=0, label=ft.Text("一")),
                ft.ChartAxisLabel(value=1, label=ft.Text("二")),
                ft.ChartAxisLabel(value=2, label=ft.Text("三")),
                ft.ChartAxisLabel(value=3, label=ft.Text("四")),
                ft.ChartAxisLabel(value=4, label=ft.Text("五")),
                ft.ChartAxisLabel(value=5, label=ft.Text("六")),
                ft.ChartAxisLabel(value=6, label=ft.Text("日")),
            ],
        ),
        on_chart_event=on_chart_event,
        interactive=True,
    )

    page.add(
        ft.Container(
            chart, bgcolor=ft.Colors.GREEN_200, padding=10, border_radius=5, expand=True
        )
    )

ft.app(main)

`BarChart` 属性

`animate`

控制图表的隐式动画。

值属于 AnimationValue 类型。

`bar_groups`

要绘制的 BarChartGroup 的列表。

`baseline_y`

Y 轴的基线值。

默认为 0。

`bgcolor`

图表的背景颜色。

`border`

图表周围的边框。

值属于 Border 类型。

`bottom_axis`

配置底部轴的外观、其标题和标签。值是 ChartAxis 类的实例。

`groups_space`

柱状图组之间的间隙。

`horizontal_grid_lines`

控制图表水平线条的绘制。

值的类型为ChartGridLines。

`interactive`

当鼠标悬停在图表柱上时启用自动工具提示。

`left_axis`

配置左侧轴的外观、其标题和标签。

值属于 ChartAxis 类型。

`max_y`

配置 Y 轴显示的最大值。

`min_y`

配置 Y 轴显示的最小值。

`right_axis`

配置右侧轴的外观、其标题和标签。值是 ChartAxis 类的实例。

`top_axis`

配置顶部轴的外观、其标题和标签。值是 ChartAxis 类的实例。

`tooltip_bgcolor`

工具提示的背景颜色。

`tooltip_border_side`

工具提示边框边。

`tooltip_direction`

控制工具提示显示在顶部或底部，默认是自动。

`tooltip_fit_inside_horizontally`

如果发生溢出，强制工具提示在图表内水平移动。值的类型为bool。

`tooltip_fit_inside_vertically`

如果发生溢出，强制工具提示在图表内垂直移动。值的类型为bool。

`tooltip_horizontal_offset`

应用水平偏移以显示工具提示。默认为0。

`tooltip_margin`

在柱状图上方显示工具提示时应用底部边距。

`tooltip_max_content_width`

限制工具提示的宽度。

`tooltip_padding`

为在工具提示内显示内容应用内边距。

`tooltip_rounded_radius`

为工具提示设置圆角半径。

`tooltip_rotate_angle`

工具提示的旋转角度。

`vertical_grid_lines`

控制图表垂直线条的绘制。

值属于 ChartGridLines 类型。

`BarChart` 事件

`on_chart_event`

当一个柱被悬停或点击时触发。

事件处理程序接收一个 BarChartEvent 的实例。

示例​

条形图 1​

条形图 2​

BarChart 属性​

animate​

bar_groups​

baseline_y​

bgcolor​

border​

bottom_axis​

groups_space​

horizontal_grid_lines​

interactive​

left_axis​

max_y​

min_y​

right_axis​

top_axis​

tooltip_bgcolor​

tooltip_border_side​

tooltip_direction​

tooltip_fit_inside_horizontally​

tooltip_fit_inside_vertically​

tooltip_horizontal_offset​

tooltip_margin​

tooltip_max_content_width​

tooltip_padding​

tooltip_rounded_radius​

tooltip_rotate_angle​

vertical_grid_lines​

BarChart 事件​

on_chart_event​

示例