flutter - 如何在颤动图表中旋转文本？

Question

我正在尝试在颤动应用程序中设计一个图表，该图表显示针对时间或日期绘制的数据（取决于按下按钮），但是，我遇到了一个问题，即图形标签文本相互碰撞。

我想知道是否有一种方法可以旋转 fl_chart 对象 LineChartData 中的文本以倾斜或垂直旋转显示日期或时间？

到目前为止，我的代码看起来像这样，图形的输出看起来像这样：

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:sembast/timestamp.dart';

import '../models/outcome.dart';

dynamic grapher() {
  return Stack(
    children: <Widget>[
      AspectRatio(
        aspectRatio: 1.70,
        child: Container(
          decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(18),
              ),
              color: Colors.black),
          child: Padding(
            padding: const EdgeInsets.only(
                right: 18.0, left: 12.0, top: 24, bottom: 12),
            child: LineChart(
              mainData(),
            ),
          ),
        ),
      ),
    ],
  );
}

LineChartData mainData() {
  return LineChartData(

    ...

    titlesData: FlTitlesData(
      show: true,
      bottomTitles: SideTitles(
        showTitles: true,
        reservedSize: 22,
        textStyle: const TextStyle(
            color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
        getTitles: (value) {
          //return value.round().toString();
          for (int i = 0; i <= outcomeList.length; i++) {
            return outcomeList[i].recordedTime.toString();
          }
        },
        margin: 8,
      ),

      ...

    ),

    ...

}



List<FlSpot> datapoints = [
  FlSpot(0, outcomeList[0].value),
  FlSpot(2.6, outcomeList[1].value),
  FlSpot(4.9, outcomeList[2].value),
  FlSpot(6.8, outcomeList[3].value),
  FlSpot(8, outcomeList[4].value),
  FlSpot(10, outcomeList[5].value),
];

List<Outcome> outcomeList = [
  Outcome(name: 'mood', recordedTime: Timestamp.now(), value: 5.6),
  Outcome(
      name: 'mood',
      recordedTime:
          Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 1))),
      value: 6.7),
  Outcome(
      name: 'mood',
      recordedTime:
          Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 2))),
      value: 5.5),
  Outcome(
      name: 'mood',
      recordedTime:
          Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 3))),
      value: 6.2),
  Outcome(
      name: 'mood',
      recordedTime:
          Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 4))),
      value: 7.7),
  Outcome(
      name: 'mood',
      recordedTime: Timestamp.fromDateTime(
          DateTime.now().add(new Duration(hours: 5, minutes: 26))),
      value: 6.4),
];

Answer 1

您可以使用SideTitles的属性rotateAngle
完整代码是官方演示LineChartSample7使用rotateAngle
您可以在下面看到工作演示的红色矩形

代码片段

SideTitles(
            rotateAngle: 90,
            showTitles: true,

工作演示

完整代码

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineChartSample7 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 140,
      child: LineChart(
        LineChartData(
          lineTouchData: LineTouchData(enabled: false),
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, 4),
                FlSpot(1, 3.5),
                FlSpot(2, 4.5),
                FlSpot(3, 1),
                FlSpot(4, 4),
                FlSpot(5, 6),
                FlSpot(6, 6.5),
                FlSpot(7, 6),
                FlSpot(8, 4),
                FlSpot(9, 6),
                FlSpot(10, 6),
                FlSpot(11, 7),
              ],
              isCurved: true,
              barWidth: 2,
              colors: [
                Colors.green,
              ],
              dotData: FlDotData(
                show: false,
              ),
            ),
            LineChartBarData(
              spots: [
                FlSpot(0, 0),
                FlSpot(1, 3),
                FlSpot(2, 4),
                FlSpot(3, 5),
                FlSpot(4, 8),
                FlSpot(5, 3),
                FlSpot(6, 5),
                FlSpot(7, 8),
                FlSpot(8, 4),
                FlSpot(9, 7),
                FlSpot(10, 7),
                FlSpot(11, 8),
              ],
              isCurved: true,
              barWidth: 2,
              colors: [
                Colors.black,
              ],
              dotData: FlDotData(
                show: false,
              ),
            ),
            LineChartBarData(
              spots: [
                FlSpot(0, 7),
                FlSpot(1, 3),
                FlSpot(2, 4),
                FlSpot(3, 0),
                FlSpot(4, 3),
                FlSpot(5, 4),
                FlSpot(6, 5),
                FlSpot(7, 3),
                FlSpot(8, 2),
                FlSpot(9, 4),
                FlSpot(10, 1),
                FlSpot(11, 3),
              ],
              isCurved: false,
              barWidth: 2,
              colors: [
                Colors.red,
              ],
              dotData: FlDotData(
                show: false,
              ),
            ),
          ],
          betweenBarsData: [
            BetweenBarsData(
              fromIndex: 0,
              toIndex: 2,
              colors: [Colors.red.withOpacity(0.3)],
            )
          ],
          minY: 0,
          titlesData: FlTitlesData(
            bottomTitles: SideTitles(
                rotateAngle: 90,
                showTitles: true,
                textStyle:
                    TextStyle(fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold),
                getTitles: (value) {
                  switch (value.toInt()) {
                    case 0:
                      return 'Jan';
                    case 1:
                      return 'Feb';
                    case 2:
                      return 'Mar';
                    case 3:
                      return 'Apr';
                    case 4:
                      return 'May';
                    case 5:
                      return 'Jun';
                    case 6:
                      return 'Jul';
                    case 7:
                      return 'Aug';
                    case 8:
                      return 'Sep';
                    case 9:
                      return 'Oct';
                    case 10:
                      return 'Nov';
                    case 11:
                      return 'Dec';
                    default:
                      return '';
                  }
                }),
            leftTitles: SideTitles(
              showTitles: true,
              getTitles: (value) {
                return '\$ ${value + 0.5}';
              },
            ),
          ),
          gridData: FlGridData(
            show: true,
            checkToShowHorizontalLine: (double value) {
              return value == 1 || value == 6 || value == 4 || value == 5;
            },
          ),
        ),
      ),
    );
  }
}