【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"

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/177718.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

邦芒宝典：职场中最重要的16种竞争力

邦芒宝典：职场中最重要的16种竞争力

​​职场竞争力包括哪几个方面&#xff0c;职场竞争力,简单地说,就是在职场中与他人相比&#xff0c;你所具备的优势及长处。以下小邦精心为大家准备了职场竞争力包括哪几个方面&#xff0c;快来一起看看吧。 ​1、技能和知识&#xff1a;具备相关的技能和知识&#xff0c;尤其…
阅读更多...
世微 舞台灯深度调光 大功率 dc-dc降压恒流驱动IC APS54083

世微 舞台灯深度调光 大功率 dc-dc降压恒流驱动IC APS54083

产品描述 APS54083 是一款 PWM 工作模式,高效率、外围简单、外置功率 MOS 管&#xff0c;适用于 5-220V 输入高精度降压 LED 恒流驱动芯片。输出最大功率150W最大电流 6A。APS54083 可实现线性调光和 PWM 调光&#xff0c;线性调光脚有效电压范围 0.5-2.5V.PWM 调光频率范围 10…
阅读更多...
C++ :静态成员

C++ :静态成员

静态成员 静态成员就是在成员变量和成员函数前加上关键字 static &#xff0c;称为静态成员 静态成员分为&#xff1a; 静态成员变量 1.所有对象共享同一份数据 2.在编译阶段分配内存 3.类内声明&#xff0c;类外初始化 静态成员函数 1.所有对象共享同一个函数 2.静态成…
阅读更多...
HTTPS的安全问题及应对方案

HTTPS的安全问题及应对方案

HTTPS是一种在网络通信中广泛使用的安全协议&#xff0c;通过使用SSL/TLS加密来保护数据的传输。然而&#xff0c;即使在使用了HTTPS的情况下&#xff0c;仍然存在一些潜在的安全问题。本文将深入探讨HTTPS的安全问题&#xff0c;并提供一些有效的应对策略&#xff0c;以确保数…
阅读更多...
CodeGeeX2模型安装

CodeGeeX2模型安装

简介 CodeGeeX2 是多语言代码生成模型 CodeGeeX (KDD’23) 的第二代模型。不同于一代 CodeGeeX&#xff08;完全在国产华为昇腾芯片平台训练&#xff09; &#xff0c;CodeGeeX2 是基于 ChatGLM2 架构加入代码预训练实现&#xff0c;得益于 ChatGLM2 的更优性能&#xff0c;Co…
阅读更多...
第29期 | GPTSecurity周报

第29期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…
阅读更多...
C# 实现微信退款及对帐

C# 实现微信退款及对帐

目录 需求 基础准备 关键代码 操作界面 ​编辑 退款订单类及方法 退款功能实现 对帐 支付商家后台相关要点 实时交易帐单查询 精确交易帐单查询 小结 需求 在招聘报名系统里&#xff0c;考务费支付是其中一个环节&#xff0c;支付方式很多种&#xff0c;比如银联、…
阅读更多...
MySQL数据库 增删改查

MySQL数据库 增删改查

目录 MySQL 数据插入 MySQL 数据删除 MySQL 数据更新 MySQL 数据查询 MySQL 联合查询 解决乱码问题 MySQL 数据插入 向MySQL数据表插入数据通用的 INSERT INTO SQL语法&#xff1a; INSERT INTO table_name ( field1, field2,...fieldN ) VALUES ( value1, value2,...v…
阅读更多...
操作系统CLOCK算法

操作系统CLOCK算法

操作系统时钟(CLOCK)置换算法_时钟置换算法-CSDN博客 前七步相同 第八步的时候 发现页面在内存中 标记位变成1 但是指针不需要移动。
阅读更多...
什么软件可以去视频水印？分享3个超实用去水印工具

什么软件可以去视频水印？分享3个超实用去水印工具

什么软件可以去视频水印&#xff1f;短视频已然成为了我们日常生活或工作的一部分&#xff0c;当我们遇到感兴趣的视频想保存发现无法保存&#xff0c;或者保存后留有水印&#xff0c;非常影响我们视频观看度和分享欲&#xff0c;为了解决这一问题&#xff0c;许多针对视频水印…
阅读更多...
如何用CHAT写“科技探索者”视频号运营方案

如何用CHAT写“科技探索者”视频号运营方案

问CHAT&#xff1a;生成一篇“科技探索者”视频号运营方案&#xff0c;要求内容&#xff1a; &#xff08;1&#xff09;视频号的定位、面向的人群、主要发布哪方面的内容 &#xff08;2&#xff09;视频号的内容设计&#xff08;用什么样的方式来体现、最好有内容创意&#xf…
阅读更多...
生产环境_sql获spark将课程与对应的选课人员以逗号分隔的形式存储

生产环境_sql获spark将课程与对应的选课人员以逗号分隔的形式存储

需求 将课程和人员列进行分组&#xff0c;然后将人员列聚合为逗号分隔的字符串。 数据 course | person Math | Alice Math | Bob Math | Charlie| Science| David Science| Emily Science| Frank sql代码&#xff1a; SELECT 课程, GROUP_CONCAT(人员 ORD…
阅读更多...
学习笔记-瑞吉外卖项目实战（一）

学习笔记-瑞吉外卖项目实战（一）

软件开发整体介绍 软件开发流程 角色分工 软件环境 瑞吉外卖项目介绍 项目介绍 产品原型介绍 技术选型 功能架构 角色 开发环境搭建 数据 创建database reggie&#xff0c;在里面创建表&#xff1a; maven 创建springboot项目并导入相关依赖坐标&#xff1a; 我们可以在项目…
阅读更多...
【已解决】AttributeError: module ‘matplotlib‘ has no attribute ‘imshow‘

【已解决】AttributeError: module ‘matplotlib‘ has no attribute ‘imshow‘

首先 在学习OpenCV的第一个程序&#xff0c;碰到这个问题记录一下。首先我已经安装好了matplotlib 如下图&#xff1a; 所以可以排除的就是我已经具备了这个库&#xff0c;那就是我在调用的时候出现的问题。 其次 回到pycharm&#xff0c;检查一下代码并做出如下的修改。 …
阅读更多...
通达信抛物线SAR指标原理详解、参数设置及选股公式

通达信抛物线SAR指标原理详解、参数设置及选股公式

抛物线指标(SAR)是由技术分析大师威尔斯威尔德(Welles Wilder)发明的&#xff0c;在其1978 年出版的《技术交易系统新概念》一书中介绍了该指标。SAR指标通过跟踪股票价格的动态变化&#xff0c;在走势图上以一系列点的形式显示&#xff0c;提供了一种判断趋势反转的方法&#…
阅读更多...
鸿蒙应用开发-初见：入门知识、应用模型

鸿蒙应用开发-初见：入门知识、应用模型

基础知识 Stage模型应用程序包结构 开发并打包完成后的App的程序包结构如图 开发者通过DevEco Studio把应用程序编译为一个或者多个.hap后缀的文件&#xff0c;即HAP一个应用中的.hap文件合在一起称为一个Bundle&#xff0c;bundleName是应用的唯一标识 需要特别说明的是&…
阅读更多...
某医院小程序存在支付漏洞和越权

某医院小程序存在支付漏洞和越权

某医院小程序存在支付漏洞和越权查看他人身份证&#xff0c;手机号&#xff0c;住址等信息 一个医院线上的小程序 登陆后点击个人信息&#xff0c;抓包&#xff0c;放到repeter模块&#xff0c; 修改strUserID参数可以越权查看别人信息 放intruder模块可以跑数据&#xff0c;这…
阅读更多...
Redis缓存设计典型问题

Redis缓存设计典型问题

目录 缓存穿透 缓存失效&#xff08;击穿&#xff09; 缓存雪崩 热点缓存key重建优化 缓存与数据库双写不一致 缓存穿透 缓存穿透是指查询一个根本不存在的数据&#xff0c; 缓存层和存储层都不会命中&#xff0c; 通常出于容错的考虑&#xff0c; 如果从存储层查不到数据…
阅读更多...
MybatisPlus改造逻辑删除有多方便

MybatisPlus改造逻辑删除有多方便

MybatisPlus的逻辑删除可以有效保留历史数据。之前没有用逻辑删除的项目&#xff0c;想改造成逻辑删除总共需要几步&#xff1f; 答案&#xff1a;4步搞定 一、修改pom.xml的MybatisPlus版本&#xff08;注意版本兼容性&#xff09; <properties>...<!--<mybatis-…
阅读更多...
anyRTC 融合音视频能力底座：助力企业数字化转型

anyRTC 融合音视频能力底座：助力企业数字化转型

随着全球化的发展&#xff0c;产业竞争日益激烈。数字化转型和创新成为了企业提高竞争力、实现可持续发展的重要手段&#xff0c;面对产业结构调整、资源环境挑战、数字技术与创新带来的行业颠覆与机遇&#xff0c;企业需要进行数字化转型和创新以适应新环境和新时代的挑战。 …
阅读更多...
最新文章

Copyright @ 2022~2023