【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.hqwc.cn/news/226075.html

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

相关文章

2023-简单点-机器学习中常用的特殊函数，激活函数[sigmoid tanh ]

2023-简单点-机器学习中常用的特殊函数，激活函数[sigmoid tanh ]

机器学习中的特殊函数 Sigmoidsoftplus函数tanhReLu(x)Leaky-ReluELUSiLu/ SwishMish伽玛函数beta函数Ref Sigmoid 值域: 【0,1】 定义域&#xff1a;【负无穷,正无穷】 特殊点记忆&#xff1a; 经过 [0 , 0.5] 关键点[0,0.5]处的导数是 0.025 相关导数&#xff1a; softplu…
阅读更多...
地大与明道云的实践：零代码产教融合与协同育人

地大与明道云的实践：零代码产教融合与协同育人

摘要 中国地质大学&#xff08;武汉&#xff09;与明道云合作&#xff0c;通过建设数字学院的方式&#xff0c;塑造教育数字化新动能。具体实践包括&#xff1a; 联合建设数字学院&#xff1a;选择经济管理学院作为试点&#xff0c;通过统筹规划、统一标准、分步实施的方式&a…
阅读更多...
Spring（2）：Spring事务管理机制

Spring（2）：Spring事务管理机制

Spring事务管理高层抽象主要包括3个接口&#xff0c;Spring的事务主要是由他们共同完成的&#xff1a; PlatformTransactionManager&#xff1a;事务管理器—主要用于平台相关事务的管理。TransactionDefinition&#xff1a; 事务定义信息(隔离、传播、超时、只读)—通过配置如…
阅读更多...
EOCR-PFZ数码型产品与控制柜主回路的连接方式

EOCR-PFZ数码型产品与控制柜主回路的连接方式

上海韩施电气自动化设备有限公司 施耐德EOCR新一代数码型电动机保护器具有体积小、精度高、抗干扰能力强等特点。为方便安装&#xff0c;EOCR数码型产品与控制柜主回路的连接具有多种方式&#xff0c;分别是&#xff1a;窗口型、贯穿性和端子型。 窗口型&#xff08;韩施电气…
阅读更多...
静态方法和属性的经典使用-单例设计模式

静态方法和属性的经典使用-单例设计模式

单例设计模式 一、设计模式二、单例模式1、饿汉式2、懒汉式3、区别 单例设计模式是静态方法和属性的经典使用。 一、设计模式 设计模式是在大量的实践中总结和理论化之后优选的代码结构、编程风格、以及解决问题的思考方式。设计模式就像是经典的棋谱&#xff0c;不同的棋局&…
阅读更多...
蚁剑低版本反制

蚁剑低版本反制

蚁剑低版本反制 漏洞概述 中国蚁剑是一款开源的跨平台网站管理工具&#xff0c;它主要面向于合法授权的渗透测试安全人员以及进行常规操作的网站管理员。影响范围 AntSword <2.0.7 蚁剑实验版本&#xff1a;2.0.7 环境搭建&#xff1a; 172.16.1.233&#xff08;蓝队服…
阅读更多...
Numpy进阶

Numpy进阶

NumPy进阶80题完整版
阅读更多...
The module to import is incompatible with the current project【鸿蒙开发-BUG已解决】

The module to import is incompatible with the current project【鸿蒙开发-BUG已解决】

文章目录 项目场景：问题描述原因分析：解决方案：心得体会：知识点OpenHarmony：HarmonyOS：项目场景： 报错： The module to import is incompatible with the current project 问题描述 希望通过 import module 将该模块引入到我的项目。 导入后出现错误，因为项目和模块…
阅读更多...
springboot云HIS医院信息综合管理平台源码

springboot云HIS医院信息综合管理平台源码

满足基层医院机构各类业务需要的健康云HIS系统。该系统能帮助基层医院机构完成日常各类业务&#xff0c;提供病患挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查询、医生站和护士站等一系列常规功能&#xff0c;能与公卫、PACS等各类外部系统融合&#xff0c;实现多…
阅读更多...
Echarts的引入使用

Echarts的引入使用

ECharts文档 1.下载并引入Echarts 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置项和数据(option) 5.将配置项设置给echarts实例对象 最后是一个js文件 echarts的引入 1.引入echarts - js 文件 <script src"js/echarts.min.js"></scri…
阅读更多...
vue 中 js 金额数字转中文

vue 中 js 金额数字转中文

参考&#xff1a;js工具函数之数字转为中文数字和大写金额_js封装工具类函数金额大写-CSDN博客 我使用的框架vol.core。 客户需求要将录入框的金额数字转换成中文在旁边显示&#xff0c;换了几种函数&#xff0c;最终确定如下函数 function changeToChineseMoney(Num) {//判断…
阅读更多...
计算机服务器中了faust勒索病毒怎么办，faust勒索病毒解密文件恢复

计算机服务器中了faust勒索病毒怎么办，faust勒索病毒解密文件恢复

计算机技术的不断发展&#xff0c;为企业的生产生活运营提供了坚实基础&#xff0c;但网络是一把双刃剑&#xff0c;网络安全威胁也在不断增加&#xff0c;近期&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的计算机服务器遭到了faust勒索病毒攻击&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023