如何在 Flutter 中使用 fl_chart 和 Back4App 可视化数据

介绍 数据可视化是现代应用程序的一个关键方面，帮助用户通过直观的图形和图表理解复杂数据。在本教程中，您将学习如何在您的 flutter 应用程序中使用 fl chart 包创建交互式和视觉上吸引人的图表。此外，您将集成 back4app——一个由 parse server 提供支持的后端即服务 (baas) 平台——以存储和检索图表数据。在本教程结束时，您将拥有一个完全功能的 flutter 应用程序，显示从 back4app 获取的动态数据，使用各种图表类型，如折线图、柱状图和饼图。 先决条件 要完成本教程，您需要 一个 back4app 账户 。如果您没有，可以在 back4app https //www back4app com/ 注册一个免费账户。 在您的本地机器上安装 flutter sdk 。您可以按照 官方 flutter 安装指南 https //flutter dev/docs/get started/install 来安装适合您操作系统的版本。 基本的 dart 和 flutter 知识 。如果您是 flutter 新手，建议您查看 flutter 文档 https //flutter dev/docs 以熟悉基础知识。 parse server sdk for flutter 已添加到您的项目中。您可以通过查看 back4app flutter sdk 指南 https //www back4app com/docs/flutter/parse flutter sdk 来学习如何设置它。 一个 ide 或文本编辑器 ，如 visual studio code 或 android studio。 步骤 1 – 设置 back4app 后端 在此步骤中，您将创建一个新的 back4app 应用程序并设置一个数据类以存储您的图表数据。 1 1 创建一个新的 back4app 应用程序 登录到您的 back4app 控制面板 https //dashboard back4app com/ 点击 "创建新应用" 输入您的应用程序名称，例如， "flutterchartapp" , 然后点击 "创建" 1 2 设置数据模型 在您的应用程序仪表板中，导航到左侧边栏中的 "数据库" 部分。 点击页面顶部的 "创建类" 。 在出现的模态中： 选择 "自定义" 。 输入 "销售数据" 作为类名。 点击 "创建类" 。 1 3 向类中添加列 在 "销售数据" 类中，点击 "+" 以添加新列。 添加以下列： 月份 类型 字符串 销售额 类型 数字 您的数据模型现在已设置为存储每月销售数据，您将在 flutter 应用中可视化这些数据。 步骤 2 – 用示例数据填充数据库 在您的应用中获取数据之前，您需要在 back4app 数据库中添加一些示例数据。 仍然在 "销售数据" 类中，点击 "+" 以添加新行。 输入以下示例数据： 重复上述步骤以添加所有示例数据条目。 步骤 3 – 设置 flutter 项目 在这一步中，您将创建一个新的 flutter 项目并添加必要的依赖项。 3 1 创建一个新的 flutter 项目 打开您的终端并运行： flutter create flutter chart app 导航到项目目录： cd flutter chart app 3 2 添加依赖到 pubspec yaml 打开 pubspec yaml 并添加以下依赖项： dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 运行 flutter pub get 来安装包 步骤 4 – 在您的 flutter 应用中初始化 parse 要将您的 flutter 应用与 back4app 连接，您需要初始化 parse sdk 4 1 获取 back4app 应用凭证 在您的 back4app 仪表板中，导航到 "应用设置" > "安全性与密钥" 记下您的 应用程序 id 和 客户端密钥 4 2 在 main dart 中初始化 parse 打开 lib/main dart 并按如下方式修改它 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file in the next step void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'flutter chart app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } 替换 'your application id' 和 'your client key' 以使用您从 back4app 获得的凭据。 步骤 5 – 从 back4app 获取数据 在此步骤中，您将使用 parse sdk 从 back4app 获取销售数据。 5 1 创建 home page dart 创建一个新文件 lib/home page dart 并添加以下代码： import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ fl chart/fl chart dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class salesdata { final string month; final double sales; salesdata(this month, this sales); } class homepagestate extends state\<homepage> { list\<salesdata> chartdata = \[]; @override void initstate() { super initstate(); fetchsalesdata(); } future\<void> fetchsalesdata() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('salesdata')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { chartdata = apiresponse results! map((data) { final month = data get\<string>('month') ?? ''; final sales = data get\<num>('sales')? todouble() ?? 0 0; return salesdata(month, sales); }) tolist(); }); } else { // handle errors print('error fetching data ${apiresponse error? message}'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('sales chart'), ), body chartdata isempty ? center(child circularprogressindicator()) padding( padding const edgeinsets all(16 0), child linechart( linechartdata( miny 0, maxy 250, titlesdata fltitlesdata( lefttitles axistitles( sidetitles sidetitles(showtitles true), ), bottomtitles axistitles( sidetitles sidetitles( showtitles true, gettitleswidget bottomtitlewidgets, interval 1, ), ), ), griddata flgriddata(show true), borderdata flborderdata( show true, border border all(color colors grey), ), linebarsdata \[ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], dotdata fldotdata(show true), ), ], ), ), )); } widget bottomtitlewidgets(double value, titlemeta meta) { const style = textstyle( fontsize 12, ); widget text; int index = value toint(); if (index >= 0 && index < chartdata length) { text = text(chartdata\[index] month substring(0, 3), style style); } else { text = text('', style style); } return sidetitlewidget( axisside meta axisside, child text, ); } } 解释 salesdata 类 一个简单的模型类，用于保存月份和销售数据。 fetchsalesdata() 从 salesdata 类中获取数据，更新 chartdata 列表。 linechart 使用 fl chart 根据获取的数据创建折线图。 bottomtitlewidgets() 自定义底部坐标轴标签以显示月份缩写。 步骤 6 – 运行应用程序 现在您已经设置了前端和后端，是时候运行您的应用程序了。 在终端中，导航到您的项目目录。 使用以下命令运行应用程序： flutter run 您应该看到一条显示每月销售数据的折线图。 步骤 7 – 添加交互性和自定义 为了使您的图表更具交互性和视觉吸引力，您可以进一步自定义它。 7 1 自定义图表外观 修改您的 linechartbardata 在您的 build 方法中： linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], belowbardata barareadata( show true, colors \[colors blue withopacity(0 3)], ), dotdata fldotdata( show true, ), ) belowbardata 在线下方添加填充区域。 dotdata 在每个数据点显示点。 7 2 启用触摸交互 您可以启用触摸交互以显示工具提示。 将以下内容添加到您的 linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), 步骤 8 – 显示不同的图表类型 您还可以使用 fl chart 显示其他类型的图表。 8 1 饼图示例 在您的 build 方法中将 linechart 替换为 piechart piechart( piechartdata( sections chartdata map((data) { return piechartsectiondata( value data sales, title data month substring(0, 3), color colors primaries\[chartdata indexof(data) % colors primaries length], ); }) tolist(), sectionsspace 2, centerspaceradius 40, ), ) piechartsectiondata 定义饼图的每个部分。 结论 在本教程中，您学习了如何使用 fl chart 包在您的 flutter 应用程序中可视化数据。您集成了 back4app 作为后端解决方案，以使用 parse sdk 存储和检索数据。通过从 back4app 获取数据并使用各种图表类型显示它，您现在可以在 flutter 应用程序中构建动态和交互式的数据可视化。 为了进一步增强您的应用程序，请考虑探索 fl chart 提供的其他图表类型，例如条形图和雷达图。您还可以通过集成来自 back4app 的实时查询来实现实时数据更新。 附加资源： back4app 文档 https //www back4app com/docs pub dev 上的 fl chart 包 https //pub dev/packages/fl chart flutter 的 parse sdk 指南 https //docs parseplatform org/flutter/guide/ flutter 官方文档 https //flutter dev/docs 请确保将占位符值替换为 'your application id' 和 'your client key' ，以使用您实际的 back4app 凭据。祝您编码愉快！