Flutter图表绘制插件line

Flutter图表绘制插件line_chart的使用

Line Chart

line_chart 是一个简单的Flutter包，用于创建自定义折线图。

LineChart

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  line_chart: ^1.0.9

然后导入它：

import 'package:line_chart/charts/line-chart.widget.dart';

使用方法

创建一个 LineChart 小部件并传递必要的参数：

基本用法

LineChart(
  width: 300, // 图表宽度
  height: 180, // 图表高度
  data: [], // 图表数据
  linePaint: Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black, // 自定义线条画笔
),

完整配置

以下是包含所有选项的 LineChart 小部件：

LineChart(
  width: 300, // 图表宽度
  height: 180, // 图表高度
  data: [], // 图表数据
  linePaint: Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black, // 自定义线条画笔
  circlePaint: Paint()..color = Colors.black, // 自定义圆点画笔
  showPointer: true, // 是否显示指针（默认为true）
  showCircles: true, // 是否显示每个数据点的圆点
  customDraw: (Canvas canvas, Size size) {}, // 自定义绘制内容
  circleRadiusValue: 6, // 圆点半径
  linePointerDecoration: BoxDecoration(
    color: Colors.black,
  ), // 线条指针装饰
  pointerDecoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.black,
  ), // 圆点指针装饰
  insideCirclePaint: Paint()..color = Colors.white, // 内部圆点画笔
  onValuePointer: (LineChartModel value) {
    print('onValuePointer');
  }, // 当指针改变时的回调
  onDropPointer: () {
    print('onDropPointer');
  }, // 当移除手指时的回调
),

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用程序中使用 line_chart 插件：

import 'package:flutter/material.dart';
import 'package:line_chart/charts/line-chart.widget.dart';
import 'package:line_chart/model/line-chart.model.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<LineChartModel> data = [
    LineChartModel(amount: 300, date: DateTime(2020, 1, 1)),
    LineChartModel(amount: 200, date: DateTime(2020, 1, 2)),
    LineChartModel(amount: 300, date: DateTime(2020, 1, 3)),
    LineChartModel(amount: 500, date: DateTime(2020, 1, 4)),
    LineChartModel(amount: 800, date: DateTime(2020, 1, 5)),
    LineChartModel(amount: 200, date: DateTime(2020, 1, 6)),
    LineChartModel(amount: 120, date: DateTime(2020, 1, 7)),
    LineChartModel(amount: 140, date: DateTime(2020, 1, 8)),
    LineChartModel(amount: 110, date: DateTime(2020, 1, 9)),
    LineChartModel(amount: 250, date: DateTime(2020, 1, 10)),
    LineChartModel(amount: 390, date: DateTime(2020, 1, 11)),
    LineChartModel(amount: 1300, date: DateTime(2020, 1, 12)),
  ];

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      data = [
        LineChartModel(amount: 500, date: DateTime(2020, 1, 4)),
        LineChartModel(amount: 200, date: DateTime(2020, 1, 2)),
        LineChartModel(amount: 200, date: DateTime(2020, 1, 6)),
        LineChartModel(amount: 800, date: DateTime(2020, 1, 5)),
        LineChartModel(amount: 1300, date: DateTime(2020, 1, 12)),
        LineChartModel(amount: 300, date: DateTime(2020, 1, 3)),
        LineChartModel(amount: 120, date: DateTime(2020, 1, 7)),
        LineChartModel(amount: 250, date: DateTime(2020, 1, 10)),
        LineChartModel(amount: 140, date: DateTime(2020, 1, 8)),
        LineChartModel(amount: 100, date: DateTime(2020, 1, 1)),
        LineChartModel(amount: 390, date: DateTime(2020, 1, 11)),
        LineChartModel(amount: 110, date: DateTime(2020, 1, 9)),
        LineChartModel(amount: 410, date: DateTime(2020, 4, 9)),
      ];
    });
  }

  @override
  Widget build(BuildContext context) {
    Paint circlePaint = Paint()..color = Colors.black;
    Paint insideCirclePaint = Paint()..color = Colors.white;
    Paint linePaint = Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black;

    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart Showcase'),
      ),
      body: ListView(
        children: [
          // 第一个图表
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Line chart - Line, Circles, Pointer',
                style: Theme.of(context).textTheme.headline5,
              ),
              LineChart(
                width: MediaQuery.of(context).size.width,
                height: 180,
                data: data,
                linePaint: linePaint,
                circlePaint: circlePaint,
                showPointer: true,
                showCircles: true,
                customDraw: (Canvas canvas, Size size) {},
                linePointerDecoration: BoxDecoration(
                  color: Colors.black,
                ),
                pointerDecoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.black,
                ),
                insideCirclePaint: insideCirclePaint,
                onValuePointer: (LineChartModelCallback value) {
                  print('${value.chart} ${value.percentage}');
                },
                onDropPointer: () {
                  print('onDropPointer');
                },
                insidePadding: 16,
              ),
            ],
          ),

          // 第二个图表
          Padding(
            padding: EdgeInsets.symmetric(
              vertical: 24,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Line chart - Line, Pointer',
                  style: Theme.of(context).textTheme.headline5,
                ),
                LineChart(
                  width: MediaQuery.of(context).size.width,
                  height: 180,
                  data: data,
                  linePaint: linePaint,
                  circlePaint: circlePaint,
                  showPointer: true,
                  showCircles: false,
                  customDraw: (Canvas canvas, Size size) {},
                  linePointerDecoration: BoxDecoration(
                    color: Colors.black,
                  ),
                  pointerDecoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.black,
                  ),
                  insideCirclePaint: insideCirclePaint,
                  onValuePointer: (LineChartModelCallback value) {
                    print('${value.chart} ${value.percentage}');
                  },
                  onDropPointer: () {
                    print('onDropPointer');
                  },
                ),
              ],
            ),
          ),

          // 第三个图表
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Line chart - Line',
                style: Theme.of(context).textTheme.headline5,
              ),
              LineChart(
                width: MediaQuery.of(context).size.width,
                height: 180,
                data: data,
                linePaint: linePaint,
                circlePaint: circlePaint,
                showPointer: false,
                showCircles: false,
                customDraw: (Canvas canvas, Size size) {},
                linePointerDecoration: BoxDecoration(
                  color: Colors.black,
                ),
                pointerDecoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.black,
                ),
                insideCirclePaint: insideCirclePaint,
                onValuePointer: (LineChartModelCallback value) {
                  print('${value.chart} ${value.percentage}');
                },
                onDropPointer: () {
                  print('onDropPointer');
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

更多详情

如需更详细的示例，请查看 example 文件夹。

如果有任何问题或需要更多帮助，请随时提出！

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

wuwangju 1楼•18 小时前

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

当然，关于Flutter中line_chart插件的使用，下面是一个具体的代码示例，展示了如何使用line_chart插件来绘制一个简单的折线图。这里我们假设你已经将line_chart插件添加到了你的pubspec.yaml文件中。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  charts_flutter: ^0.13.0  # 请注意版本号可能会有更新，使用最新版本

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

接下来，我们编写一个完整的Flutter应用，展示如何使用line_chart来绘制一个简单的折线图。

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

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<charts.Series<LinearSales, int>> seriesList;
  final bool animate;

  LineChartScreen({this.animate = true})
      : seriesList = _createSampleData();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart Example'),
      ),
      body: Center(
        child: charts.LineChart(
          seriesList,
          animate: animate,
        ),
      ),
    );
  }

  List<charts.Series<LinearSales, int>> _createSampleData() {
    final data = [
      LinearSales(0, 5),
      LinearSales(1, 25),
      LinearSales(2, 100),
      LinearSales(3, 75),
    ];

    return [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: data,
      ),
    ];
  }
}

class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

代码解释

依赖导入：首先，我们导入了flutter和charts_flutter包。
MyApp类：这是我们的根widget，它配置了一个基本的Material应用，并将LineChartScreen设置为首页。
LineChartScreen类：这是我们的主屏幕widget。它包含了一个LineChart，该图表的数据通过_createSampleData方法生成。
_createSampleData方法：这个方法生成了一个简单的线性销售数据列表。每个数据点由LinearSales类表示，该类包含年份和销售数据。
LinearSales类：这是一个简单的数据模型，用于存储年份和销售数据。
LineChart：在LineChartScreen的build方法中，我们使用charts.LineChart来创建并显示折线图。我们传递了seriesList和animate参数。

这个示例展示了如何使用charts_flutter包中的LineChart来绘制一个简单的折线图。你可以根据需要调整数据模型和图表配置来满足你的具体需求。