Flutter syncfusion_flutter_charts 折线图使用心得

找了几天的Chart 最后还是觉得这个好,easychart是jave脚本执行,功能虽然强大 3D需要webgl支持,还有一点就是java脚本的执行效率要差很多，试了一下有明显的卡顿感,果断放弃,选这个玩意儿。功能上除了easychart外他应该是chart中最强大的了,FL Chart那个UI太丑。唯一缺点就是没得3D功能。不过一般的应该够用了。
参数试了好久,试出我想要的效果。
线条有曲线的，不喜欢太平滑的直接选用了折线

直接上代码:

yaml引用

 syncfusion_flutter_charts: ^18.1.42

试参数的东东,有些不需要的可以删除,注释了的是可能用得上的

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_core/core.dart';void main() {// Register your license hereSyncfusionLicense.registerLicense(null);return runApp(ChartApp());
}class ChartApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Chart Demo',theme: ThemeData(primarySwatch: Colors.blue),home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {// ignore: prefer_const_constructors_in_immutablesMyHomePage({Key key}) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('试验'),),body: SfCartesianChart(primaryXAxis: CategoryAxis(isVisible: true,//显示时间轴置顶opposedPosition: false,//时间轴反转isInversed: false,),//标题title: ChartTitle(text: '折线图测试'),//选中类型selectionType: SelectionType.series,//时间轴与值轴换位isTransposed: false,//选中手势selectionGesture: ActivationMode.singleTap,//图示legend: Legend(isVisible: true,iconHeight: 10,iconWidth: 10,//切换系列显示toggleSeriesVisibility: true,//图示显示位置position: LegendPosition.bottom,overflowMode: LegendItemOverflowMode.wrap,//图示左右位置alignment: ChartAlignment.center),//十字架crosshairBehavior: CrosshairBehavior(lineType: CrosshairLineType.horizontal, //横向选择指示器enable: true,shouldAlwaysShow: false, //十字架始终显示(横向选择指示器)activationMode: ActivationMode.singleTap,),//跟踪球trackballBehavior: TrackballBehavior(lineType: TrackballLineType.vertical, //纵向选择指示器activationMode: ActivationMode.singleTap,enable: true,tooltipAlignment: ChartAlignment.near, //工具提示位置(顶部)shouldAlwaysShow: true, //跟踪球始终显示(纵向选择指示器)tooltipDisplayMode:TrackballDisplayMode.groupAllPoints, //工具提示模式(全部分组)),//打开工具提示tooltipBehavior: TooltipBehavior(enable: true,shared: true,activationMode: ActivationMode.singleTap,),//SplineSeries为曲线 LineSeries为折线ChartSeriesseries: <ChartSeries<SalesData, String>>[LineSeries<SalesData, String>(name: '已开',dataSource: <SalesData>[SalesData('00:00', 35),SalesData('00:30', 28),SalesData('01:00', 34),SalesData('01:30', 32),SalesData('23:30', 40)],xValueMapper: (SalesData sales, _) => sales.year,yValueMapper: (SalesData sales, _) => sales.sales,//显示数据标签dataLabelSettings: DataLabelSettings(isVisible: false,// alignment: ChartAlignment.near,// labelAlignment: ChartDataLabelAlignment.outer,// textStyle: ChartTextStyle(//   fontSize: 14,// ),),//修饰数据点(显示圆圈)markerSettings: MarkerSettings(isVisible: true),),LineSeries<SalesData, String>(name: '预订',dataSource: <SalesData>[SalesData('00:00', 40),SalesData('00:30', 30),SalesData('01:00', 37),SalesData('01:30', 35),SalesData('23:30', 20)],xValueMapper: (SalesData sales, _) => sales.year,yValueMapper: (SalesData sales, _) => sales.sales,//显示数据标签dataLabelSettings: DataLabelSettings(isVisible: false,// alignment: ChartAlignment.near,// labelAlignment: ChartDataLabelAlignment.outer,// textStyle: ChartTextStyle(//   fontSize: 14,// ),),//修饰数据点(显示圆圈)markerSettings: MarkerSettings(isVisible: true),),]));}
}class SalesData {SalesData(this.year, this.sales);final String year;final double sales;
}

Flutter syncfusion_flutter_charts 折线图使用心得相关推荐

Flutter图表库fl_chart的使用解析(二)-折线图，金九银十
MacBook-Pro:~ xun$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Fl ...
Flutter 绘制波浪移动动画效果，曲线和折线图
简介上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状.本篇我们来介绍线 ...
JFreeChart展示柱状图和折线图的组合
笔者最近工作需要在Web前端展示统计图表(基于SSH架构),使用了JFreeChart和amchart两个控件,谈谈使用心得. JFreeChart的最大好处是可以在Server端保存 ...
qchart折现图_Qt Charts 动态实时折线图绘制
在Qt Charts发布之前, Qt比较著名两个画图插件是 qwt和Qcustom, 其中Qcustom较轻量,只需要在project 中包含qcustomplot.h 和 qcustomplot.c ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
graphpad做折线图坐标轴数字_pandas做数据可视化具体操作，快来看看吧
常见的数据可视化库有: matplotlib 是最常见的2维库,可以算作可视化的必备技能库,由于matplotlib是比较底层的库,api很多,代码学起来不太容易. seaborn 是建构于matpl ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
【统计图】Echarts实现多条折线图渐变堆叠效果
initSgLineChart() {// 基于DOM,初始化echarts实例(注意!Vue的DOM日怪的很,一般要腾个1秒才加载完)this.lineChart = this.$echarts.i ...
报表应用系列——图表JFreeChart: 第 4 章折线图
双击代码全选 1 2 3 4 5 DefaultCategoryDataset dataset = new DefaultCategoryDataset(); dataset.addValue(100 ...

Flutter syncfusion_flutter_charts 折线图使用心得

Flutter syncfusion_flutter_charts 折线图使用心得相关推荐

最新文章

热门文章