Y 轴显示 minutes:seconds:cents 的 Flutter 图表

Question

我正在使用 Flutter 开发一个应用程序，它必须显示游泳比赛的计时比赛结果。我无法在 Y 轴上表示 min:sec:mills。似乎 Charts 接受的唯一值是 int。有什么办法可以解决吗？

Answer 1

调用下面的函数，将 min:sec:mils 格式的 String 转换为 int 类型的毫秒。使用它来表示图表中的 Y 轴。在 Y 轴的标签中使用 min:sec:mils 格式本身的 String。

注1：需要将格式min:sec:mils的String值传入函数。 示例： "24:36:10".

注释 2： 函数 returns 一个 int 值。

int convertToMilliseconds(String time) {
  var arr = time.split(':');
  String min = arr[0];
  String sec = arr[1];
  String mils = arr[2];
  int a = int.parse(min);
  int b = int.parse(sec);
  int c = int.parse(mils);
  int intTimeInMilliseconds = Duration(minutes: a).inMilliseconds + Duration(seconds: b).inMilliseconds + c ;
return intTimeInMilliseconds;
}

完整示例：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /*This is a 800 meters running race data
  * David RUDISHA = 1:40:91
  * Wilson KIPKETER = 1:41:11
  * Sebastian COE = 1:41:73
  * Nijel AMOS = 1:41:73
  * Joaquim CRUZ = 1:41:77 */

  static const String Racer1Name = 'David RUDISHA';
  static const String Racer2Name = 'Wilson KIPKETER';
  static const String Racer3Name = 'Sebastian COE';
  static const String Racer4Name = 'Nijel AMOS';
  static const String Racer5Name = 'Joaquim CRUZ';

  static const String Racer1Time = '1:40:91';
  static const String Racer2Time = '1:41:11';
  static const String Racer3Time = '1:41:73';
  static const String Racer4Time = '1:41:73';
  static const String Racer5Time = '1:41:77';

  int Racer1TimeMilliSeconds = convertToMilliseconds(Racer1Time);
  int Racer2TimeMilliSeconds = convertToMilliseconds(Racer2Time);
  int Racer3TimeMilliSeconds = convertToMilliseconds(Racer3Time);
  int Racer4TimeMilliSeconds = convertToMilliseconds(Racer4Time);
  int Racer5TimeMilliSeconds = convertToMilliseconds(Racer5Time);

  @override
  Widget build(BuildContext context) {
    String Racer1TimeStringMilliSeconds = Racer1TimeMilliSeconds.toString();
    String Racer2TimeStringMilliSeconds = Racer2TimeMilliSeconds.toString();
    String Racer3TimeStringMilliSeconds = Racer3TimeMilliSeconds.toString();
    String Racer4TimeStringMilliSeconds = Racer4TimeMilliSeconds.toString();
    String Racer5TimeStringMilliSeconds = Racer5TimeMilliSeconds.toString();

    final List<RaceData> chartData = [
      RaceData(
          Racer1TimeMilliSeconds,
          '${Racer1Name}' +
              '\nminutes:seconds:milliseconds ${Racer1Time}' +
              '\n${Racer1TimeStringMilliSeconds} milliseconds'),
      RaceData(
          Racer2TimeMilliSeconds,
          '${Racer2Name}' +
              '\nminutes:seconds:milliseconds ${Racer2Time}' +
              '\n${Racer2TimeStringMilliSeconds} milliseconds'),
      RaceData(
          Racer3TimeMilliSeconds,
          '${Racer3Name}' +
              '\nminutes:seconds:milliseconds ${Racer3Time}' +
              '\n${Racer3TimeStringMilliSeconds} milliseconds'),
      RaceData(
          Racer4TimeMilliSeconds,
          '${Racer4Name}' +
              '\nminutes:seconds:milliseconds ${Racer4Time}' +
              '\n${Racer4TimeStringMilliSeconds} milliseconds'),
      RaceData(
          Racer5TimeMilliSeconds,
          '${Racer5Name}' +
              '\nminutes:seconds:milliseconds ${Racer5Time}' +
              '\n${Racer5TimeStringMilliSeconds} milliseconds'),
    ];

    return Scaffold(
      body: Container(
        child: SfCartesianChart(
            primaryXAxis: CategoryAxis(
              // Axis labels will be rotated to 90 degree
                labelRotation: 0,
                labelIntersectAction: AxisLabelIntersectAction.multipleRows,
            ),
          title: ChartTitle(
              text: 'Race Data',
              backgroundColor: Colors.white,
              borderColor: Colors.black,
              borderWidth: 1,
              // Aligns the chart title to left
              alignment: ChartAlignment.center,
              textStyle: TextStyle(
                color: Colors.black,
                fontFamily: 'Roboto',
                fontStyle: FontStyle.italic,
                fontSize: 20,
              )),

          series: <ChartSeries>[
            // Renders line chart

            ColumnSeries<RaceData, String>(
              dataSource: chartData,
              xValueMapper: (RaceData race, _) => race.name,
              yValueMapper: (RaceData race, _) => race.time,
              enableTooltip: true,

              dataLabelSettings: DataLabelSettings(
                // Renders the data label
                isVisible: true,
                angle: 0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RaceData {
  RaceData(this.time, this.name);

  final String name;
  final int time;
}

int convertToMilliseconds(String time) {
  var arr = time.split(':');
  print(arr);
  String min = arr[0];
  String sec = arr[1];
  String mils = arr[2];
  int a = int.parse(min);
  int b = int.parse(sec);
  int c = int.parse(mils);
  int intTimeInMilliseconds = Duration(minutes: a).inMilliseconds +
      Duration(seconds: b).inMilliseconds +
      c;
  return intTimeInMilliseconds;
}

平板电脑视图：

手机浏览：

Y 轴显示 minutes:seconds:cents 的 Flutter 图表

Flutter Charts with Y axis displaying minutes:seconds:cents

charts

duration

flutter