Flutter图表绘制插件simple_charts的使用

Flutter图表绘制插件simple_charts的使用

特性

Light widgets to display charts.

示例图表

功能

  • 显示百分比图表。
  • 显示日期图表。
  • 可以自定义X轴和/或Y轴的显示。

使用方法

简单易用，只需提供所需数据即可。

final data2 = {
  'Data 1': 0,
  'Data 2': 1,
  'Data 3': 2,
  'Data 4': 3,
};

PercentageChart(
  data: data2,
  height: 200,
  thickness: 2,
)

完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用simple_charts插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Charts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Simple charts Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 示例数据1：日期图表
  final data1 = {
    DateTime.now(): 10,
    DateTime.now().add(const Duration(days: 1)): 23,
    DateTime.now().add(const Duration(days: 2)): 5,
    DateTime.now().add(const Duration(days: 3)): 15,
    DateTime.now().add(const Duration(days: 4)): 20,
    DateTime.now().add(const Duration(days: 5)): 50,
  };

  // 示例数据2：百分比图表
  final data2 = {
    'Data 1': 0,
    'Data 2': 1,
    'Data 3': 2,
    'Data 4': 3,
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('示例：日期图表：'),
            const SizedBox(height: 24), // 添加间距
            DateChart(data: data1),
            const SizedBox(height: 52), // 添加间距
            const Text('示例：百分比图表：'),
            const SizedBox(height: 24), // 添加间距
            PercentageChart(
              data: data2,
              height: 200, // 图表高度
              thickness: 2, // 线条厚度
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter图表绘制插件simple_charts的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图表绘制插件simple_charts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_charts 是一个用于 Flutter 的简单图表绘制插件，它可以帮助你快速创建常见的图表类型，如折线图、柱状图、饼图等。这个插件非常适合需要快速集成图表的 Flutter 应用。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 simple_charts 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_charts: ^1.0.0  # 请根据最新版本号进行替换

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

2. 使用插件

以下是一些常见图表的使用示例。

2.1 折线图 (Line Chart)

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

class LineChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart Example'),
      ),
      body: Center(
        child: LineChart(
          data: [
            LineChartData(
              xValues: [1, 2, 3, 4, 5],
              yValues: [10, 20, 15, 30, 25],
              lineColor: Colors.blue,
              lineWidth: 2.0,
            ),
          ],
          xAxisLabel: 'X Axis',
          yAxisLabel: 'Y Axis',
        ),
      ),
    );
  }
}

2.2 柱状图 (Bar Chart)

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

class BarChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bar Chart Example'),
      ),
      body: Center(
        child: BarChart(
          data: [
            BarChartData(
              xValues: ['A', 'B', 'C', 'D', 'E'],
              yValues: [10, 20, 15, 30, 25],
              barColor: Colors.green,
            ),
          ],
          xAxisLabel: 'Categories',
          yAxisLabel: 'Values',
        ),
      ),
    );
  }
}

2.3 饼图 (Pie Chart)

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

class PieChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pie Chart Example'),
      ),
      body: Center(
        child: PieChart(
          data: [
            PieChartData(
              label: 'Category A',
              value: 30,
              color: Colors.red,
            ),
            PieChartData(
              label: 'Category B',
              value: 20,
              color: Colors.blue,
            ),
            PieChartData(
              label: 'Category C',
              value: 50,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部