Biểu đồ thanh ngang trong Flutter

Question

Tôi đang cố gắng đạt được biểu đồ thanh ngang một cách rung động. Tôi đã xem qua các gói này fl_charts và chart_flutter. nhưng tôi cần phải tùy chỉnh ngoại hình để phù hợp với hình ảnh tôi đính kèm sau đây. Nếu bất kỳ nhà vô địch nào có thể hỗ trợ tôi trong việc hướng dẫn tôi các bước để đạt được điều này hoặc một quy tắc mẫu mực sẽ rất hữu ích. Cảm ơn trước.

Answer 1

Sử dụng LayoutBuilder biết chiều rộng càng tốt, và IntrinsicWidth để tính toán vị trí của tiêu đề và số, nhưng đồng thời không thu nhỏ văn bản tiêu đề dài.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _title('Food Weight(grams)'),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChartLine(title: 'Fat', number: 1800, rate: 1),
                ChartLine(title: 'Protein', number: 600, rate: 0.4)
              ],
            ),
          ),
          _title('Ratios'),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChartLine(
                  title: 'Calculum/Phosporous ratio = 2:1',
                  rate: 0.5,
                ),
                ChartLine(
                  title: 'Omega3/6 ratio = 1:4',
                  rate: 0.4,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _title(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0, top: 4),
      child: Text(
        title,
        style: TextStyle(fontSize: 18),
      ),
    );
  }
}

class ChartLine extends StatelessWidget {
  const ChartLine({
    Key key,
    @required this.rate,
    @required this.title,
    this.number,
  })  : assert(title != null),
        assert(rate != null),
        assert(rate > 0),
        assert(rate <= 1),
        super(key: key);

  final double rate;
  final String title;
  final int number;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final lineWidget = constraints.maxWidth * rate;
      return Padding(
        padding: const EdgeInsets.only(bottom: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              constraints: BoxConstraints(minWidth: lineWidget),
              child: IntrinsicWidth(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 18,
                      ),
                    ),
                    if (number != null)
                      Text(
                        number.toString(),
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                  ],
                ),
              ),
            ),
            Container(
              color: Colors.blue,
              height: 60,
              width: lineWidget,
            ),
          ],
        ),
      );
    });
  }
}

Answer 2

Bạn có thể sử dụng gói biểu đồ Flutter của Syncfusion, vì tôi đang sử dụng bây giờ cho ứng dụng của mình. Sử dụng tiện ích con SfCartesianChart của Syncfusion, hiển thị biểu đồ thanh cùng với các nhãn dữ liệu và bằng cách thay đổi vị trí mặc định của nhãn dữ liệu mà bạn có thể đạt được kết quả đầu ra. Tiện ích này hoạt động trên nền tảng Android, iOS và web.

• Gói- https://pub.dev/packages/syncfusion_flutter_charts
• Đặc trưng- https://www.syncfusion.com/flutter-widgets/flutter-charts
• Tài liệu- https://help.syncfusion.com/flutter/cartesian-charts/overview