【Flutter】graphic图表的快速上手

2023-11-28 22:20
文章标签 快速 图表 flutter graphic

本文主要是介绍【Flutter】graphic图表的快速上手，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简介

graphic是一个数据可视化语法和Flutter图表库。

在这里插入图片描述
官方github示例

网上可用资源很少，只有作者的几篇文章，并且没有特别详细的文档，使用的话还是需要一定的时间去调研，在此简单记录。

示例

以折线图为例（因为我只用到了折线图，但其他的图大差不差）

创建一个两个文件：linePage.dart和数据文件data.dart
创建main.dart，引入linePage.dart

// main.dart
import 'package:flutter/material.dart';
import './linePage.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Graphic Example',debugShowCheckedModeBanner: false,home: Scaffold(appBar: AppBar(title: const Text('Flutter Graphic Example'),),body: linePage(),));}
}
// linePage.dart 
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'package:intl/intl.dart';import './data.dart';class linePage extends StatelessWidget {linePage({super.key});final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();@overrideWidget build(BuildContext context) {return SingleChildScrollView(child: Center(child: Column(children: <Widget>[Container(padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),child: const Text('Smooth Line and Area chart', //单线style: TextStyle(fontSize: 20),),),Container(margin: const EdgeInsets.only(top: 10),width: 350,height: 300,child: Chart(// 数据源data: invalidData,// 变量配置variables: {'date': Variable(accessor: (Map map) => map['date'] as String,scale: OrdinalScale(tickCount: 5, // x轴刻度数量),),'points': Variable(// 数据值accessor: (Map map) => (map['points'] ?? double.nan) as num,),},marks: [// 线条与X轴之间区域填充AreaMark(shape: ShapeEncode(value:BasicAreaShape(smooth: true), // smooth: true 使线条变得平滑),color: ColorEncode(value: Colors.pink.withAlpha(80),),),// 线条LineMark(shape: ShapeEncode(value: BasicLineShape(smooth: true),),// 粗细size: SizeEncode(value: 1.5),),],// 坐标轴配置axes: [Defaults.horizontalAxis,Defaults.verticalAxis,],/** 选项配置* 可以写多个，提供给tooltip单独配置selections：{‘touchMove’}选择* 或者marks中LineMark的color属性的updaters*/selections: {// 'touchMove'名称随意起，一般与是功能性描述词'touchMove': PointSelection(on: { //on里面配置操作选项GestureType.scaleUpdate, // 可垂直或水平移动准线GestureType.tapDown,     // 点击GestureType.longPressMoveUpdate  //长按拖动},dim: Dim.x,)},// 触摸弹框提示tooltip: TooltipGuide(//未单独配置 selections，默认使用上面的selections中配置// 跟随鼠标位置（感觉主要是看第二项是true，tooltip框才会跟随，false会随着鼠标移动乱动）followPointer: [false, true],align: Alignment.topLeft, // tooltip弹框对于点击位置的对齐方式offset: const Offset(-20, -20), //  位置偏移量，结合align),// 十字准线crosshair: CrosshairGuide(followPointer: [false, true]),),),Container(padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),child: const Text('Group interactions', //多线style: TextStyle(fontSize: 20),),),Container(margin: const EdgeInsets.only(top: 10),width: 350,height: 300,child: Chart(data: invalidData1,// 根据给定线条数据的name值相同的为同一条线variables: {'date': Variable(accessor: (Map map) => map['date'] as String,scale: OrdinalScale(tickCount: 5, inflate: true),),'points': Variable(accessor: (Map map) => (map['points'] ?? double.nan) as num,),'name': Variable(accessor: (Map map) => map['name'] as String,),},coord: RectCoord(horizontalRange: [0.1, 0.99]),marks: [LineMark(position:Varset('date') * Varset('points') / Varset('name'),shape: ShapeEncode(value: BasicLineShape(smooth: true)),size: SizeEncode(value: 1.5),color: ColorEncode(variable: 'name',values: Defaults.colors10,// 改变线条颜色// updaters: {// 'groupMouse'是在selections中配置的//   'groupMouse': {false: (color) => color.withAlpha(100)},//   // 'groupTouch': {false: (color) => color.withAlpha(100)},// },),),// 显示线条上的数据点// PointMark(//   color: ColorEncode(//     variable: 'name',//     values: Defaults.colors10,//     updaters: {//       'groupMouse': {false: (color) => color.withAlpha(100)},//       'groupTouch': {false: (color) => color.withAlpha(100)},//     },//   ),// ),],axes: [Defaults.horizontalAxis,Defaults.verticalAxis,],// // 提示框选项配置selections: {'666': PointSelection(on: {GestureType.hover, GestureType.tap},// 设备[mouse(鼠标),stylus(手写笔),invertedStylus,trackpad(触控板)，touch(触摸屏)，unknown]// 参考资料：https://api.flutter.dev/flutter/dart-ui/PointerDeviceKind.htmldevices: {PointerDeviceKind.mouse // 鼠标 （该配置在鼠标设备时生效）},// 显示此处date相同的数据variable: 'date',),'groupMouse': PointSelection(// 触发的交互// 参考资料：https://pub.dev/documentation/keyboard_dismisser/latest/keyboard_dismisser/GestureType.htmlon: {GestureType.hover, // 覆盖},// variable: 'name',devices: {PointerDeviceKind.mouse},),'tooltipTouch': PointSelection(on: {GestureType.scaleUpdate, GestureType.tapDown, //点击GestureType.longPressMoveUpdate },// variable: 'name',devices: {PointerDeviceKind.touch，  // 触摸屏（仅在触摸设备生效：神奇的是不包括iOS）},),'tooltipTouchIos': PointSelection(on: {GestureType.scaleUpdate,GestureType.tapDown,GestureType.longPressMoveUpdate},// variable: 'name',devices: {// 未知设备（不明白为啥iOS被识别成了unknown，猜测可能与ios中的触摸事件有关）PointerDeviceKind.unknown, },),},tooltip: TooltipGuide(// 选择触发配置selections: {'tooltipTouch', '666'},followPointer: [false, true],align: Alignment.topLeft,// tooltip中显示的内容（按顺序显示）// 与上方selections中定义的variable相排斥variables: [// 'date','name','points',],),// 十字准线配置crosshair: CrosshairGuide(selections: {'tooltipTouch', '666'},styles: [PaintStyle(strokeColor: const Color.fromARGB(255, 92, 68, 68)),PaintStyle(strokeColor: const Color.fromARGB(0, 158, 154, 154)),],followPointer: [false, true],),),),],),),);}
}

数据文件

// data.dart
const invalidData1 = [{"date": "2016-01-04", "name": "线条1", "points": 126.12},{"date": "2016-01-05", "name": "线条1", "points": 125.688},{"date": "2016-01-06", "name": "线条1", "points": 119.704},{"date": "2016-01-07", "name": "线条1", "points": 120.19},{"date": "2016-01-08", "name": "线条1", "points": 121.157},{"date": "2016-01-11", "name": "线条1", "points": 117},{"date": "2016-01-12", "name": "线条1", "points": 120},{"date": "2016-01-13", "name": "线条1", "points": 122},{"date": "2016-01-14", "name": "线条1", "points": 117.76},{"date": "2016-01-15", "name": "线条1", "points": 114.397},{"date": "2016-01-18", "name": "线条1", "points": 116.373},{"date": "2016-01-19", "name": "线条1", "points": 120.547},{"date": "2016-01-20", "name": "线条1", "points": 113.733},{"date": "2016-01-21", "name": "线条1", "points": 114.098},{"date": "2016-01-22", "name": "线条1", "points": 123.833},{"date": "2016-01-25", "name": "线条1", "points": 125},{"date": "2016-01-26", "name": "线条1", "points": 124.866},{"date": "2016-01-27", "name": "线条1", "points": 120.264},{"date": "2016-01-28", "name": "线条1", "points": 122.296},{"date": "2016-01-29", "name": "线条1", "points": 124.502},{"date": "2016-02-01", "name": "线条1", "points": 127.936},{"date": "2016-02-02", "name": "线条1", "points": null},{"date": "2016-02-03", "name": "线条1", "points": 129.95},{"date": "2016-02-04", "name": "线条1", "points": 129.275},{"date": "2016-02-05"

这篇关于【Flutter】graphic图表的快速上手的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/430403。

相关文章

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

在日常使用电脑的过程中，我们经常会遇到这样的情况：一不小心，桌面上的某个重要文件被删除了。这时，大多数人可能会感到惊慌失措，不知所措。 其实，不必过于担心，因为有很多方法可以帮助我们找回被删除的桌面文件。下面，就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件，并且还没有进行其他操作，那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C
阅读更多...
hdu 4565 推倒公式+矩阵快速幂

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值： Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中： 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令： An=(a+b√)n A_n = (a +
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
v0.dev快速开发

v0.dev快速开发

探索v0.dev：次世代开发者之利器 今之技艺日新月异，开发者之工具亦随之进步不辍。v0.dev者，新兴之开发者利器也，迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势，助汝速速上手，提升开发之效率。 何谓v0.dev？ v0.dev者，现代化之开发者工具也，旨在简化并加速软件开发之过程。其集多种功能于一体，助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者
阅读更多...
利用Django框架快速构建Web应用：从零到上线

利用Django框架快速构建Web应用：从零到上线

随着互联网的发展，Web应用的需求日益增长，而Django作为一个高级的Python Web框架，以其强大的功能和灵活的架构，成为了众多开发者的选择。本文将指导你如何从零开始使用Django框架构建一个简单的Web应用，并将其部署到线上，让世界看到你的作品。 Django简介 Django是由Adrian Holovaty和Simon Willison于2005年开发的一个开源框架，旨在简
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
CentOs7上Mysql快速迁移脚本

CentOs7上Mysql快速迁移脚本

因公司业务需要，对原来在/usr/local/mysql/data目录下的数据迁移到/data/local/mysql/mysqlData。 原因是系统盘太小，只有20G，几下就快满了。 参考过几篇文章，基于大神们的思路，我封装成了.sh脚本。 步骤如下： 1） 先修改好/etc/my.cnf,        ##[mysqld]       ##datadir=/data/loc
阅读更多...
SAM2POINT：以zero-shot且快速的方式将任何 3D 视频分割为视频

SAM2POINT：以zero-shot且快速的方式将任何 3D 视频分割为视频

摘要 我们介绍 SAM2POINT，这是一种采用 Segment Anything Model 2 (SAM 2) 进行零样本和快速 3D 分割的初步探索。 SAM2POINT 将任何 3D 数据解释为一系列多向视频，并利用 SAM 2 进行 3D 空间分割，无需进一步训练或 2D-3D 投影。 我们的框架支持各种提示类型，包括 3D 点、框和掩模，并且可以泛化到不同的场景，例如 3D 对象、室
阅读更多...
UE5 半透明阴影 快速解决方案

UE5 半透明阴影 快速解决方案

Step 1： 打开该选项 Step 2： 将半透明材质给到模型后，设置光照的Shadow Resolution Scale，越大，阴影的效果越好
阅读更多...
快速排序（java代码实现）

快速排序（java代码实现）

简介： 1.采用“分治”的思想，对于一组数据，选择一个基准元素，这里选择中间元素mid 2.通过第一轮扫描，比mid小的元素都在mid左边，比mid大的元素都在mid右边 3.然后使用递归排序这两部分，直到序列中所有数据均有序为止。 public class csdnTest {public static void main(String[] args){int[] arr = {3,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2