Windowsアプリでグラフ表示をする際、横軸をスクロールできるようにした

dart

1import 'dart:ffi';2 3import 'package:flutter/material.dart';4import 'package:syncfusion_flutter_charts/charts.dart';5import 'package:intl/intl.dart';6import 'dart:io';7import 'package:fluttertoast/fluttertoast.dart';8 9 10void main() => runApp(MyApp());11 12class MeasData {13 MeasData(this.dateTime, this.data);14 15 final DateTime dateTime;16 final double data;17}18 19class MyApp extends StatelessWidget {20 const MyApp({super.key});21 22 @override23 Widget build(BuildContext context) {24 return MaterialApp(25 theme: ThemeData(26 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),27 useMaterial3: true,28 ),29 home: StatefulDemo(),30 );31 }32}33 34class StatefulDemo extends StatefulWidget {35 @override36 State<StatefulWidget> createState() => _StatefulDemo();37}38 39 40class _StatefulDemo extends State<StatefulDemo>{41 ScrollController _controller = ScrollController();42 String filePath = 'データ.txt';43 List<MeasData> displayDataVolt = [];44 List<MeasData> displayDataCurrent = [];45 List<DateTime> dates = [];46 List<double> values = [];47 48 @override49 void initState(){50 super.initState();51 readFile();52 }53 54 Future<void> readFile() async {55 try{56 File file = File(filePath);57 List<String> lines = await file.readAsLines();58 for (int i = 2; i < lines.length; i++) {59 List<String> data = lines[i].split(',');60 DateTime date = DateFormat('yyyy/MM/dd HH:mm:ss').parse('${data[0]} ${data[1]}');61 double value = double.parse(data[3]);62 63 displayDataVolt.add(MeasData(date, value));64 }65 for (int i = 2; i < lines.length; i++) {66 List<String> data = lines[i].split(',');67 DateTime date = DateFormat('yyyy/MM/dd HH:mm:ss').parse('${data[0]} ${data[1]}');68 double value = double.parse(data[27]);69 70 displayDataCurrent.add(MeasData(date, value));71 }72 //Fluttertoast.showToast(msg: "完了しました");73 74 }catch (e) {75 print("ファイルを読み込めません");76 }77 setState(() {78 });79 }80 81 @override82 Widget build(BuildContext context) {83 // グラフクリック時の動作84 TooltipBehavior _tooltipBehavior;85 _tooltipBehavior = TooltipBehavior(enable: true);86 87 return Scaffold(88 appBar: AppBar(title: Text('折れ線グラフデモ'),),89 body: Padding(90 padding: const EdgeInsets.all(5),91 child: Column(92 mainAxisAlignment: MainAxisAlignment.center,93 children: [94 SfCartesianChart(95 title: ChartTitle(text: '電圧'), // タイトル96 legend: Legend(isVisible: true), // 凡例の表示97 tooltipBehavior: _tooltipBehavior, // グラフクリック時の動作98 series: <ChartSeries>[99 // Renders line chart100 LineSeries<MeasData, String>(101 dataSource: displayDataVolt,102 xValueMapper: (MeasData displayDataVolt, _) => displayDataVolt.dateTime.toString(),103 yValueMapper: (MeasData displayDataVolt, _) => displayDataVolt.data,104 dataLabelSettings: const DataLabelSettings(isVisible: false), // データ数値の表示105 name: '電圧', // 凡例の名前106 enableTooltip: true // グラフクリック時の動作107 108 )109 ],110 primaryXAxis: CategoryAxis(111 autoScrollingMode: AutoScrollingMode.start,112 //visibleMaximum: 10,113 ),114 // Y軸の通過記号の表示115 primaryYAxis: NumericAxis(116 axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) {117 return ChartAxisLabel("${axisLabelRenderArgs.value}V", null);118 }119 ),120 //numberFormat: NumberFormat.scientificPattern()),121 ),122 SfCartesianChart(123 title: ChartTitle(text: '電流'), // タイトル124 legend: Legend(isVisible: true), // 凡例の表示125 tooltipBehavior: _tooltipBehavior, // グラフクリック時の動作126 series: <ChartSeries>[127 // Renders line chart128 LineSeries<MeasData, String>(129 dataSource: displayDataCurrent,130 xValueMapper: (MeasData displayDataCurrent, _) => displayDataCurrent.dateTime.toString(),131 yValueMapper: (MeasData displayDataCurrent, _) => displayDataCurrent.data,132 dataLabelSettings: const DataLabelSettings(isVisible: false), // データ数値の表示133 name: '電流', // 凡例の名前134 enableTooltip: true // グラフクリック時の動作135 )136 ],137 primaryXAxis: CategoryAxis(138 autoScrollingMode: AutoScrollingMode.start,139 140 //visibleMaximum: 10,141 ),142 // Y軸の通過記号の表示143 primaryYAxis: NumericAxis(144 axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) {145 return ChartAxisLabel("${axisLabelRenderArgs.value}A", null);146 }147 ),148 ),149 150 ],151 ),152 ),153 );154 }155}156