dart Fl图表 Flutter

5t7ly7z5  于 2023-09-28  发布在  Flutter
关注(0)|答案(1)|浏览(83)

我使用FL图表,我想做一个图表,其中LeftTitle和RightTitle将相互独立。现在我设置maxY和minY,它立即在右侧和左侧工作。有没有可能使它们相互独立?

我试着改变minY和maxY,但它没有帮助我

k7fdbhmy

k7fdbhmy1#

此代码可能有帮助,请在这里查看:-

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Independent Axes Chart'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: IndependentAxesChart(),
          ),
        ),
      ),
    );
  }
}

class IndependentAxesChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Create data for both left and right axes
    List<FlSpot> leftData = [
      const FlSpot(0, 5),
      const FlSpot(1, 10),
      const FlSpot(2, 15),
      const FlSpot(3, 20),
    ];

    List<FlSpot> rightData = [
      const FlSpot(0, 100),
      const FlSpot(1, 200),
      const FlSpot(2, 300),
      const FlSpot(3, 400),
    ];

    return LineChart(
      LineChartData(
        gridData: const FlGridData(show: false),
        titlesData: const FlTitlesData(
          leftTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 28,
            ),
          ),
          rightTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 28,
            ),
          ),
        ),

        borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1),
        ),
        minX: 0,
        maxX: 3,
        minY: 0, // Set your left axis minimum here
        maxY: 25, // Set your left axis maximum here

        lineBarsData: [
          LineChartBarData(
            spots: leftData,
            isCurved: true,
            color: Colors.blue,
            dotData: const FlDotData(show: false),
            belowBarData: BarAreaData(show: false),
          ),
          LineChartBarData(
            spots: rightData,
            isCurved: true,
            color: Colors.red,
            dotData: const FlDotData(show: false),
            belowBarData: BarAreaData(show: false),
          ),
        ],
      ),
    );
  }
}

我希望这对你有帮助。

相关问题