Flutter图表绘制插件fl_chart的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter图表绘制插件fl_chart的使用

FL Chart Logo

FL Chart Logo

pub package codecov Awesome Flutter GitHub Repo stars GitHub contributors GitHub closed issues GitHub Sponsors Buy Me A Coffee donate button

Our Financial Heroes

您的财务支持是推动 fl_chart 发展的动力。在此支持我们

Sponsor 1 Sponsor 2 Become a Hero
Sponsor 1 Become a Hero Become a Hero

Overview

FL Chart 是一个高度可定制的Flutter图表库,支持以下类型的图表:

  • 折线图 (Line Chart)
  • 柱状图 (Bar Chart)
  • 饼图 (Pie Chart)
  • 散点图 (Scatter Chart)
  • 雷达图 (Radar Chart)

Overview Thumbnail

Chart Types

折线图 (LineChart)

Sample 1 Sample 2
Sample 1 Sample 2
Read More Read More

柱状图 (BarChart)

Sample 1 Sample 2
Sample 1 Sample 2
Read More Read More

饼图 (PieChart)

Sample 1 Sample 2
Sample 1 Sample 2
Read More Read More

散点图 (ScatterChart)

Sample 1 Sample 2
Sample 1 Sample 2
Read More Read More

雷达图 (RadarChart)

Sample 1
Sample 1
Read More

Let’s get started

首先,你需要在项目中添加 fl_chart。按照此指南进行操作。

然后,阅读文档。从这里开始。

建议你查看示例代码。

关于动画处理的更多信息,请参阅这里

Try it out

你可以通过以下平台试用 FL Chart 示例应用:

Donation

你的捐赠可以激励我为 fl_chart 做更多的工作并解决更多问题。以下是几种捐赠方式:

  1. 你可以在 GitHub 上赞助我(这是最可靠的方式)。
  2. 你可以请我喝杯咖啡
  3. 或者如果你是加密货币爱好者,可以向我捐赠比特币:1L7ghKdcmgydmUJAnmYmMaiVjT1LoP4a45

Contributing

🍺 欢迎提交 Pull Request!

不要忘记,open-source 离不开贡献者的支持。无论你的改动有多大,即使是修改一行代码也会对我们有很大帮助。

如果你英语流利,修正文档中的语法错误也是很大的帮助。

详情请参阅CONTRIBUTING.md,其中包含了如何为 FL Chart 贡献的指南。

报告 bug 和问题也是一种贡献。

以下是已经为 FL Chart 做出贡献的人们,希望很快也能看到你的头像。

Contributors

完整示例 Demo

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('FL Chart Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: LineChartWidget(),
        ),
      ),
    );
  }
}

class LineChartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        gridData: FlGridData(show: true),
        titlesData: FlTitlesData(
          bottomTitles: SideTitles(showTitles: true),
          leftTitles: SideTitles(showTitles: true),
        ),
        borderData: FlBorderData(show: true),
        lineBarsData: [
          LineChartBarData(
            spots: [
              FlSpot(0, 3),
              FlSpot(1, 6),
              FlSpot(2, 2),
              FlSpot(3, 5),
              FlSpot(4, 4),
            ],
            isCurved: true,
            colors: [Colors.blue],
            barWidth: 4,
            belowBarData: BarAreaData(show: true, colors: [Colors.blue.withOpacity(0.3)]),
          ),
        ],
      ),
    );
  }
}

这个示例展示了如何创建一个简单的折线图。你可以根据需要调整数据和样式以适应你的应用需求。


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

1 回复

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


当然,以下是一个关于如何在Flutter中使用fl_chart插件来绘制图表的代码示例。fl_chart是一个强大的Flutter图表库,可以用来绘制多种类型的图表,如折线图、柱状图、饼图和雷达图等。

首先,你需要在你的pubspec.yaml文件中添加fl_chart依赖:

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.0  # 请检查最新版本号

然后,你可以在你的Flutter项目中开始使用fl_chart来绘制图表。以下是一个简单的折线图示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Line Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LineChartScreen(),
    );
  }
}

class LineChartScreen extends StatelessWidget {
  final List<FlSpot> flSpots = flSpotsData();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart Example'),
      ),
      body: Center(
        child: SizedBox(
          width: 300,
          height: 200,
          child: LineChart(
            LineChartData(
              dataSet: [
                LineChartDataSet(
                  spots: flSpots,
                  color: Colors.blue,
                  dot: DataPointCircle(color: Colors.blue),
                  decreasingColor: Colors.red,
                  increasingColor: Colors.green,
                  showDataInTooltip: true,
                ),
              ],
              borderData: FlBorderData(show: false),
              gridData: FlGridData(
                show: true,
                drawVertical: false,
                horizontalIntervals: 5,
              ),
              minY: 0,
              maxX: flSpots.last.x.toDouble(),
              minY: flSpots.map((spot) => spot.y).reduce((value, element) => value < element ? value : element).toDouble() - 2,
              maxY: flSpots.map((spot) => spot.y).reduce((value, element) => value > element ? value : element).toDouble() + 2,
            ),
          ),
        ),
      ),
    );
  }

  List<FlSpot> flSpotsData() {
    return [
      FlSpot(0, 3),
      FlSpot(1, 5),
      FlSpot(2, 7),
      FlSpot(3, 8),
      FlSpot(4, 6),
      FlSpot(5, 4),
      FlSpot(6, 9),
      FlSpot(7, 10),
    ];
  }
}

在这个示例中,我们创建了一个简单的折线图,其中:

  • LineChartScreen 是一个无状态组件,它包含了一个 LineChart 组件。
  • LineChart 组件接收一个 LineChartData 对象,该对象包含了数据集、边界数据、网格数据等。
  • LineChartDataSet 对象定义了数据点的样式(颜色、数据点圆圈颜色、递增/递减颜色等)。
  • flSpotsData 函数返回了一些示例数据点。

你可以根据需求调整 LineChartDataLineChartDataSet 的参数,例如颜色、数据点、标签等,来绘制不同的折线图。

此外,fl_chart 还支持其他类型的图表,如柱状图、饼图和雷达图等,你可以查阅 fl_chart 的 GitHub 仓库Flutter Pub 仓库 获取更多信息和示例。

回到顶部