Flutter图表绘制插件mp_chart的使用

flutter charts 类似于强大的 Android 图表库 <a href="https://github.com/PhilJay/MPAndroidChart" rel="ugc"><strong>MPAndroidChart</strong></a>。

当前支持的最低版本为 1.22.0。如果你使用的 Flutter 版本较低，请切换到 'localPosition-support' 分支，该分支支持对 flutter version 中不支持 wiget local postion 的 XXXDetails 和 PointerXXXEvent。

感谢 <a href="https://github.com/PhilJay/MPAndroidChart" rel="ugc"><strong>MPAndroidChart</strong></a>，在将此库移植到 Flutter 的过程中，我学到了很多关于矩阵在动画中的应用知识。

待办事项 (todos)

潜在问题修复

caililin 1楼

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

mp_chart 是一个基于 Flutter 的图表绘制插件，它提供了丰富的图表类型和自定义选项，帮助开发者轻松地在应用中集成各种图表。mp_chart 是基于 Android 的 MPAndroidChart 库的 Flutter 版本，因此它继承了 MPAndroidChart 的强大功能和灵活性。

1. 安装 `mp_chart` 插件

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

dependencies:
  flutter:
    sdk: flutter
  mp_chart: ^0.4.0  # 请检查最新版本

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

2. 基本使用

mp_chart 支持多种图表类型，包括折线图、柱状图、饼图、雷达图等。下面以折线图为例，介绍如何使用 mp_chart。

2.1 折线图 (LineChart)

首先，导入 mp_chart 包：

import 'package:mp_chart/mp/chart/line_chart.dart';
import 'package:mp_chart/mp/controller/line_chart_controller.dart';
import 'package:mp_chart/mp/core/data/line_data.dart';
import 'package:mp_chart/mp/core/data_interfaces/i_line_data_set.dart';
import 'package:mp_chart/mp/core/data_set/line_data_set.dart';
import 'package:mp_chart/mp/core/description.dart';
import 'package:mp_chart/mp/core/entry/entry.dart';
import 'package:mp_chart/mp/core/enums/legend_form.dart';
import 'package:mp_chart/mp/core/enums/mode.dart';
import 'package:mp_chart/mp/core/value_formatter/value_formatter.dart';

然后，创建一个 LineChartController 并配置图表：

class LineChartExample extends StatelessWidget {
  final LineChartController controller = LineChartController();

  LineChartExample() {
    _setupChart();
  }

  void _setupChart() {
    // 创建数据点
    List<Entry> entries = [
      Entry(x: 0, y: 4),
      Entry(x: 1, y: 8),
      Entry(x: 2, y: 6),
      Entry(x: 3, y: 2),
      Entry(x: 4, y: 7),
    ];

    // 创建数据集
    LineDataSet dataSet = LineDataSet(entries, "Label");
    dataSet.setColor1(Colors.blue);
    dataSet.setCircleColor(Colors.red);
    dataSet.setLineWidth(2);
    dataSet.setCircleRadius(4);
    dataSet.setDrawValues(true);

    // 创建图表数据
    LineData lineData = LineData([dataSet]);

    // 配置图表
    controller.data = lineData;
    controller.description = Description()..text = "Line Chart Example";
    controller.legend
      ..form = LegendForm.LINE
      ..textColor = Colors.black;
    controller.xAxis
      ..position = XAxisPosition.BOTTOM
      ..textColor = Colors.black;
    controller.axisLeft
      ..textColor = Colors.black;
    controller.axisRight.setEnabled(false);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Line Chart Example"),
      ),
      body: Center(
        child: LineChart(controller),
      ),
    );
  }
}

3. 其他图表类型

mp_chart 还支持其他图表类型，如柱状图 (BarChart)、饼图 (PieChart)、雷达图 (RadarChart) 等。使用方法与折线图类似，只需替换相应的图表类型和控制器即可。

3.1 柱状图 (BarChart)

import 'package:mp_chart/mp/chart/bar_chart.dart';
import 'package:mp_chart/mp/controller/bar_chart_controller.dart';
import 'package:mp_chart/mp/core/data/bar_data.dart';
import 'package:mp_chart/mp/core/data_set/bar_data_set.dart';

class BarChartExample extends StatelessWidget {
  final BarChartController controller = BarChartController();

  BarChartExample() {
    _setupChart();
  }

  void _setupChart() {
    List<BarEntry> entries = [
      BarEntry(x: 0, y: 4),
      BarEntry(x: 1, y: 8),
      BarEntry(x: 2, y: 6),
      BarEntry(x: 3, y: 2),
      BarEntry(x: 4, y: 7),
    ];

    BarDataSet dataSet = BarDataSet(entries, "Label");
    dataSet.setColor1(Colors.blue);

    BarData barData = BarData([dataSet]);

    controller.data = barData;
    controller.description = Description()..text = "Bar Chart Example";
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bar Chart Example"),
      ),
      body: Center(
        child: BarChart(controller),
      ),
    );
  }
}

Flutter图表绘制插件mp_chart的使用

Flutter图表绘制插件mp_chart的使用

待办事项 (todos)

更多例子

线形图 (LineCharts)

基础线形图

多条线形图

双轴线形图

倒置轴线形图

曲线线形图

彩色线形图

性能优化线形图

填充区域线形图

柱状图 (BarCharts)

基础柱状图

多数据集柱状图

水平柱状图

堆叠柱状图

含负值柱状图

带负值堆叠柱状图

正弦函数柱状图

饼图 (PieCharts)

基础饼图

带值线饼图

半圆饼图

其他图表 (OtherCharts)

组合图表

散点图

气泡图

蜡烛图

雷达图

滚动图表 (ScrollingCharts)

多种图表滚动

视图页滚动

高度超过屏幕的柱状图

许多柱状图滚动

更多功能图表 (EvenMoreCharts)

动态图表

实时更新图表

每小时更新图表

许可证 (License)

完整示例代码

1. 安装 mp_chart 插件

2. 基本使用

2.1 折线图 (LineChart)

3. 其他图表类型

3.1 柱状图 (BarChart)

1. 安装 `mp_chart` 插件