Flutter syncfusion_flutter_charts 折线图使用心得

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

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;
}

你可能感兴趣的:(flutter)