如何在 flutter 中创建应力图

Question

(https://i.sstatic.net/0kkGcyxC.png)

在 y 轴上将显示 4 压力状态，并且每个状态都有多个具有不同持续时间的项目。在 x 轴上需要显示 1-23 小时，但其标签仅为 12 am、12 pm 和 12am 每个项目都应该有工具提示，其中包含持续时间、压力状态标签及其各自的颜色

Answer 1

使用 fl_chart 创建压力图的示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stress Graph')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: StressGraph(),
        ),
      ),
    );
  }
}

class StressGraph extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        gridData: FlGridData(show: false),
        titlesData: FlTitlesData(
          leftTitles: SideTitles(
            showTitles: true,
            getTextStyles: (context, value) => const TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
            getTitles: (value) {
              switch (value.toInt()) {
                case 1:
                  return 'Low';
                case 2:
                  return 'Medium';
                case 3:
                  return 'High';
                case 4:
                  return 'Very High';
              }
              return '';
            },
          ),
          bottomTitles: SideTitles(
            showTitles: true,
            getTextStyles: (context, value) => const TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
            getTitles: (value) {
              switch (value.toInt()) {
                case 0:
                  return '12 AM';
                case 12:
                  return '12 PM';
                case 23:
                  return '12 AM';
              }
              return '';
            },
          ),
        ),
        borderData: FlBorderData(show: true),
        lineBarsData: [
          LineChartBarData(
            spots: [
              FlSpot(0, 1),
              FlSpot(5, 2),
              FlSpot(10, 3),
              FlSpot(15, 4),
              FlSpot(20, 2),
              FlSpot(23, 1),
            ],
            isCurved: true,
            colors: [Colors.blue],
            barWidth: 4,
            belowBarData: BarAreaData(show: false),
            dotData: FlDotData(show: true),
          ),
        ],
        lineTouchData: LineTouchData(
          touchTooltipData: LineTouchTooltipData(
            tooltipBgColor: Colors.blueAccent,
            getTooltipItems: (touchedSpots) {
              return touchedSpots.map((touchedSpot) {
                final textStyle = TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 14,
                );
                return LineTooltipItem(
                  'Time: ${touchedSpot.x.toInt()}h\nStress: ${touchedSpot.y.toInt()}',
                  textStyle,
                );
              }).toList();
            },
          ),
        ),
      ),
    );
  }
}