Flutter图表绘制插件bar_chart的使用

Flutter图表绘制插件bar_chart的使用

bar_chart 是一个用于在 Flutter 应用中绘制条形图的插件。它可以接受通用类型的输入数据来生成条形图。

开始使用

首先，确保在 pubspec.yaml 文件中添加了 bar_chart 依赖：

dependencies:
  bar_chart: ^0.5.2

然后运行 flutter pub get 来安装该依赖。

接下来，我们可以创建一个简单的条形图。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('条形图示例'),
        ),
        body: BarChartSample(),
      ),
    );
  }
}

class BarChartSample extends StatefulWidget {
  @override
  _BarChartSampleState createState() => _BarChartSampleState();
}

class _BarChartSampleState extends State<BarChartSample> {
  // 数据源
  final Map<String, double> data = {
    "一月": 5,
    "二月": 2,
    "三月": 6,
    "四月": 4,
    "五月": 8,
    "六月": 7,
  };

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        child: BarChart(
          BarChartData(
            barGroups: data.entries.map((entry) {
              return BarChartGroupData(
                x: int.parse(entry.key.split("月")[0]), // 将月份转换为整数
                barRods: [
                  BarChartRodData(
                    y: entry.value, // 数据值
                    color: Colors.blue, // 柱子颜色
                  )
                ],
              );
            }).toList(),
            titlesData: FlTitlesData(
              show: true,
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 40,
                  getTitlesWidget: (value, meta) {
                    return Text("${value.toInt()}月");
                  },
                ),
              ),
              leftTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: false),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

代码解析

1. 导入必要的库：

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

2. 定义主应用：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('条形图示例'),
           ),
           body: BarChartSample(),
         ),
       );
     }
   }
   

3. 定义条形图组件：

   class BarChartSample extends StatefulWidget {
     @override
     _BarChartSampleState createState() => _BarChartSampleState();
   }
   
   class _BarChartSampleState extends State<BarChartSample> {
     // 数据源
     final Map<String, double> data = {
       "一月": 5,
       "二月": 2,
       "三月": 6,
       "四月": 4,
       "五月": 8,
       "六月": 7,
     };
     
     @override
     Widget build(BuildContext context) {
       return Center(
         child: Container(
           height: 300,
           child: BarChart(
             BarChartData(
               barGroups: data.entries.map((entry) {
                 return BarChartGroupData(
                   x: int.parse(entry.key.split("月")[0]), // 将月份转换为整数
                   barRods: [
                     BarChartRodData(
                       y: entry.value, // 数据值
                       color: Colors.blue, // 柱子颜色
                     )
                   ],
                 );
               }).toList(),
               titlesData: FlTitlesData(
                 show: true,
                 bottomTitles: AxisTitles(
                   sideTitles: SideTitles(
                     showTitles: true,
                     reservedSize: 40,
                     getTitlesWidget: (value, meta) {
                       return Text("${value.toInt()}月");
                     },
                   ),
                 ),
                 leftTitles: AxisTitles(
                   sideTitles: SideTitles(showTitles: false),
                 ),
               ),
             ),
           ),
         ),
       );
     }
   }