找了几天的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 here
SyncfusionLicense.registerLicense(null);
return runApp(ChartApp());
}
class ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Chart Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget 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为折线ChartSeries
series: >[
LineSeries(
name: '已开',
dataSource: [
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(
name: '预订',
dataSource: [
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;
}