Flet Charts 图表控件全指南用 Python 在 Flet 应用中构建交互式数据可视化【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址: https://gitcode.com/gh_mirrors/fl/flet本篇指南系统介绍 Flet 生态中的flet-charts扩展包它基于 Flutter 的 fl_chart 库封装为 Flet 应用提供柱状图、折线图、饼图、散点图、K 线图、雷达图、Matplotlib 与 Plotly 可视化等交互式图表控件。读完本文你将掌握flet-charts的安装方式、全部图表类型清单与适用场景并能结合仓库内的完整示例代码在 Windows、macOS、Linux、iOS、Android 与 Web 六大平台上快速落地数据可视化界面。什么是 flet-chartscharts/index.md 是 Flet 官方文档中图表模块的总览页。它明确了该模块的定位由flet-charts驱动的交互式图表控件用于直接在 Flet 应用中展示柱状图bar、折线图line、饼图pie、散点图scatter以及 Plotly 可视化。从技术实现上看它有两个关键底座底层渲染基于 Flutter 生态广受欢迎的 fl_chart 图表库在 Python 侧随包携带了 Flutter 端源码由 Flet 框架自动桥接 Python 控件与 Flutter 渲染层。这一点可以从仓库中flet-charts的包结构得到印证flet-charts 包目录 同时包含两个子目录flet_charts/——Python 侧控件定义如bar_chart.py、line_chart.py、pie_chart.py、scatter_chart.py、candlestick_chart.py、radar_chart.py、matplotlib_chart.py、plotly_chart.pyflutter/flet_charts/lib/src/——对应的 Dart 渲染实现如utils/bar_chart.dart、utils/line_chart.dart等。也就是说Python 开发者在声明fch.BarChart(...)等控件时真正被渲染的是底层 Flutter 图表组件因此图表交互悬停 tooltip、点击事件、动画过渡都拥有原生 Flutter 级的流畅体验。平台支持flet-charts继承了 Flet 的全平台能力官方文档明确列出六大平台全部支持平台WindowsmacOSLinuxiOSAndroidWeb支持情况✅✅✅✅✅✅这意味着你编写的同一套 Python 图表代码既可以运行在桌面端也可以打包成移动 App 或部署为 Web 应用无需为不同平台维护多套实现。仓库内的集成测试也印证了这一点——flet-charts 集成测试 中为每种图表维护了 macOS 平台的金标golden渲染截图用于回归验证图表在各平台上的显示效果。安装与依赖配置flet-charts是独立于核心flet包的扩展包需要单独安装。官方文档提供了两种方式使用 uv推荐uv add flet-charts使用 pippip install flet-charts使用 pip 安装后有一个额外步骤需要手动将flet-charts追加到你的requirements.txt或pyproject.toml依赖列表中以便后续环境重建时能复现依赖。从 flet-charts 的 pyproject.toml 可以看到该包的依赖与约束包名flet-charts当前仓库内版本为0.1.0唯一运行时依赖flet核心框架本身Python 版本要求3.10许可证Apache-2.0构建系统setuptools并将flutter/flet_charts目录内的pubspec.yaml与lib/**一起打入 wheel 包即[tool.setuptools.package-data]配置保证 Flutter 渲染层随包分发。一个典型用法是先在项目中引入依赖然后按需import flet_charts as fch使用各个图表控件后文示例均采用这一惯例。可用图表一览flet-charts目前提供 8 类图表控件官方文档将其分为标准统计图表与生态可视化图表两组标准统计图表基于 fl_chart图表控件类典型场景详细文档柱状图fch.BarChart分类数据对比、分组柱状、堆叠柱状barchart.mdK 线图fch.CandlestickChart金融行情、股票/加密货币价格走势candlestickchart.md折线图fch.LineChart时间序列、多系列趋势、面积图linechart.md饼图fch.PieChart占比分布、环形图piechart.md雷达图fch.RadarChart多维指标对比如能力评估radarchart.md散点图fch.ScatterChart相关性分析、气泡图scatterchart.md生态可视化图表对接 Python 数据生态图表控件类典型场景详细文档Matplotlib 图fch.MatplotlibChart复用 matplotlib 既有绘图代码matplotlibchart.mdPlotly 图fch.PlotlyChart复用 plotly 交互图含工具栏plotlychart.md配套的类型文档同样齐全涵盖ChartAxis坐标轴、ChartGridLines网格线、各类Tooltip、ChartEvent事件以及PieChartSection、LineChartData、BarChartRod、ScatterChartSpot、CandlestickChartSpot、RadarDataSet等数据模型统一收录在 charts/types 目录下。柱状图实战从交互式示例看控件组成BarChart是文档首页给出的第一类图表。仓库示例 interactive_bar_chart/main.py 展示了其核心结构import flet as ft import flet_charts as fch def main(page: ft.Page): page.add( ft.SafeArea( expandTrue, contentfch.BarChart( expandTrue, interactiveTrue, max_y110, borderft.Border.all(1, ft.Colors.GREY_400), horizontal_grid_linesfch.ChartGridLines( colorft.Colors.GREY_300, width1, dash_pattern[3, 3] ), tooltipfch.BarChartTooltip( bgcolorft.Colors.with_opacity(0.5, ft.Colors.GREY_300), border_radiusft.BorderRadius.all(20), ), left_axisfch.ChartAxis( label_size40, titleft.Text(Fruit supply), title_size40 ), right_axisfch.ChartAxis(show_labelsFalse), bottom_axisfch.ChartAxis( label_size40, labels[ fch.ChartAxisLabel( value0, labelft.Container(ft.Text(Apple), padding10) ), # ... 更多轴标签 ], ), groups[ fch.BarChartGroup( x0, rods[ fch.BarChartRod( from_y0, to_y40, width40, colorft.Colors.GREEN, border_radius0, ), ], ), # ... 更多分组 ], ), ) ) if __name__ __main__: ft.run(main)这个示例覆盖了BarChart的关键配置维度值得逐一说明交互与范围interactiveTrue开启手势交互max_y110限定纵轴显示上限边框与网格border用ft.Border.all(1, ...)设置图表边框horizontal_grid_lines通过ChartGridLines配置横向网格线的颜色、线宽与虚线样式dash_pattern[3, 3]轴配置left_axis、right_axis、bottom_axis分别用ChartAxis描述可设置label_size标签字号、title/title_size轴标题及其字号、show_labels是否显示刻度标签以及labels列表——后者通过ChartAxisLabel(value..., label...)将数值刻度映射为任意 Flet 控件示例中为带 padding 的ft.Text数据模型groups接收BarChartGroup(x..., rods[...])列表每个BarChartRod由from_y、to_y决定柱体起止值width决定柱宽color指定颜色并可挂BarChartRodTooltip实现悬停提示。仓库还提供带悬停交互的变体示例 bar_chart_with_hover/main.py。配套的 Python 实现位于 bar_chart.py数据模型BarChartGroup、BarChartRod、BarChartRodStackItem均在同一目录下单独成文件。折线图实战多系列、自定义轴与运行时数据切换LineChart支持在一个图表内叠加多个数据系列并允许在运行时动态修改数据。仓库示例 multi_series_line_chart/main.py 展示了完整能力data_1 [ fch.LineChartData( stroke_width8, colorft.Colors.LIGHT_GREEN, curvedTrue, # 平滑曲线 rounded_stroke_capTrue, # 圆头线帽 points[ fch.LineChartDataPoint(1, 1), fch.LineChartDataPoint(3, 1.5), # ... 更多数据点 ], ), fch.LineChartData( colorft.Colors.PINK, below_line_bgcolorft.Colors.with_opacity(0, ft.Colors.PINK), # 面积填充 stroke_width8, curvedTrue, rounded_stroke_capTrue, points[fch.LineChartDataPoint(1, 1), fch.LineChartDataPoint(3, 2.8), ...], ), ] chart fch.LineChart( data_seriesdata_1, min_y0, max_y4, min_x0, max_x14, expandTrue, right_axisfch.ChartAxis(show_labelsFalse), left_axisfch.ChartAxis( label_size40, labels[fch.ChartAxisLabel(value1, labelft.Text(1m, size14, weightft.FontWeight.BOLD)), ...], ), bottom_axisfch.ChartAxis( label_size32, labels[fch.ChartAxisLabel(value2, labelft.Container( marginft.Margin(top10), contentft.Text(SEP, ...))), ...], ), )要点解读系列数据data_series接收LineChartData列表每个系列可独立设置color线条颜色、stroke_width线宽、curved是否平滑、rounded_stroke_cap圆头端点、below_line_bgcolor折线下方面积填充色以及pointsLineChartDataPoint(x, y)点列表坐标范围min_x/max_x/min_y/max_y控制四个方向的数据可视范围轴标签定制左右轴可隐藏show_labelsFalse也可将刻度映射为自定义控件例如左侧用加粗ft.Text显示 1m~6m底部轴通过ft.Container加margin后展示 SEP/OCT/DEC 月份刻度。更值得一提的是该示例的运行时数据切换逻辑通过chart.data_series data_2替换整个数据集、chart.max_y 6调整纵轴范围、chart.interactive False关闭交互最后调用chart.update()触发重绘。这说明LineChart的属性是响应式的——在事件回调中修改任意属性并update()即可完成动态刷新无需重建页面。声明式写法的变体见 dashboard_declarative/main.py。饼图、散点图与生态图表饼图事件驱动的悬停放大pie_chart_with_hover_sections/main.py 演示了饼图的交互事件on_event回调接收fch.PieChartEvent通过e.section_index判断命中的扇区动态放大其radius并切换title_style如加阴影的大号加粗字体再chart.update()刷新def on_chart_event(e: fch.PieChartEvent): for idx, section in enumerate(chart.sections): if idx e.section_index: section.radius HOVER_RADIUS section.title_style HOVER_TITLE_STYLE else: section.radius NORMAL_RADIUS section.title_style NORMAL_TITLE_STYLE chart.update() chart fch.PieChart( expandTrue, sections_space0, # 扇区间距 center_space_radius40, # 中心镂空半径环形图 on_eventon_chart_event, sections[ fch.PieChartSection(value40, title40%, title_styleNORMAL_TITLE_STYLE, colorft.Colors.BLUE, radiusNORMAL_RADIUS), # ... ], )PieChartSection的value决定扇区占比title为显示文本radius控制半径。其他饼图变体示例还包括悬停描边pie_chart_with_hover_borders与图标角标pie_chart_with_icon_badges。散点图事件回调与动画scatter_chart/main.py 展示了散点图的事件与动画能力通过继承fch.ScatterChartSpot自定义点样式可设selected选中态监听fch.ScatterChartEvent的ChartEventType.TAP_DOWN事件在点击时整体替换spots数据同时通过animationft.Animation(duration..., curve...)让数据变化平滑过渡def handle_event(e: fch.ScatterChartEvent): if e.type fch.ChartEventType.TAP_DOWN: e.control.spots ( flutter_logo_spots if e.control.spots ! flutter_logo_spots else get_random_spots() ) fch.ScatterChart( expandTrue, aspect_ratio1.0, min_x0.0, max_x50.0, min_y0.0, max_y50.0, left_axisfch.ChartAxis(show_labelsFalse), # ... show_tooltips_for_selected_spots_onlyFalse, on_eventhandle_event, animationft.Animation( durationft.Duration(milliseconds600), curveft.AnimationCurve.FAST_OUT_SLOWIN, ), spotsflutter_logo_spots, )Matplotlib 与 Plotly无缝对接数据科学生态对于已经使用 matplotlib 或 plotly 的项目flet-charts提供了零迁移成本的接入方式PlotlyChartplotly_bar_chart/main.py 直接用plotly.express构造 figure再传给控件——fch.PlotlyChart(figurefig, expandTrue)即可在 Flet 页面中渲染且保留 Plotly 自带的悬停信息hover_data等交互能力import plotly.express as px import flet as ft import flet_charts as fch def main(page: ft.Page): df px.data.gapminder().query(continent Oceania) fig px.bar(df, xyear, ypop, hover_data[lifeExp, gdpPercap], colorcountry, height400) page.add(ft.SafeArea(expandTrue, contentfch.PlotlyChart(figurefig, expandTrue)))其他示例见 plotly_line_chart、plotly_pie_chart 与 plotly_box_plotMatplotlibChart仓库提供 bar_chart、handle_events事件处理、three_d3D 图与 toolbar工具栏等多个示例其渲染核心是 matplotlib_backends/backend_flet_agg.py——一个面向 Flet 的 matplotlib 后端另有MatplotlibChartWithToolbar控件可提供缩放、平移等工具栏能力。K 线图与雷达图CandlestickChart金融场景的蜡烛图示例见 candlestick_chart/main.py数据点模型为CandlestickChartSpot事件与 tooltip 类型见 candlestickchartevent.mdRadarChart多维雷达图示例见 radar_chart/main.py通过RadarDataSet组织多组数据支持配置形状RadarShape与标题样式。深入理解类型体系与渲染链路所有图表控件共享一套完整的数据模型与事件类型全部收录在 charts/types 目录共 38 个文档例如坐标轴与网格ChartAxis、ChartAxisLabel、ChartGridLines、ChartPointLine通用事件ChartEventType如TAP_DOWN、BarChartEvent、LineChartEvent、PieChartEvent、ScatterChartEvent、RadarChartEvent、CandlestickChartEvent点样式ChartCirclePoint、ChartCrossPoint、ChartSquarePoint、ChartPointShapeTooltip 体系BarChartTooltip、LineChartTooltip、ScatterChartTooltip、CandlestickChartTooltip、ChartDataPointTooltip等。渲染链路上Python 控件定义与 Dart 渲染实现一一对应例如 Python 的bar_chart.py对应 flutter/flet_charts/lib/src/utils/bar_chart.dartline_chart.py对应utils/line_chart.dart。Flet 通过控件名称序列化参数、Flutter 端反序列化并调用 fl_chart 绘制最终把原生交互悬停、点击、动画回传给 Python 事件回调。集成测试integration_tests与单元测试tests共同保障了这整条链路的稳定性。快速上手指南将以上知识串成一个最小可运行流程安装依赖uv add flet-charts或pip install flet-charts后手动写入requirements.txt编写应用import flet as ft与import flet_charts as fch构造图表控件并page.add(...)运行使用 Flet 标准方式运行例如flet run详见 flet-run 文档桌面端可直接弹出窗口Web 端可部署为在线应用按需查阅每种图表的完整参数表见对应子文档如 barchart.md更多示例代码位于 examples/extensions/charts 目录按图表类型分子目录组织可直接复制运行。结语flet-charts让纯 Python 开发者无需前端经验即可获得接近原生 Flutter 的交互式图表体验8 类图表覆盖从统计图表到数据科学生态的主流可视化需求六大平台一套代码控件属性响应式驱动动态刷新事件系统支持悬停、点击等精细交互。结合仓库内丰富的示例与类型文档无论是做一个实时监控面板、金融行情页还是数据分析工具它都是 Flet 应用中最直接的可视化方案。【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址: https://gitcode.com/gh_mirrors/fl/flet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考