Flutter图表展示插件chart_view的使用

特性

固定了错误并完善了功能。

开始使用

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  chart_view: ^版本号

然后运行：

$ dart pub get

使用方法

以下是一个完整的示例代码，展示了如何使用 chart_view 插件来绘制睡眠图表。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:chart_view/chart_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('睡眠图表')),
        body: Center(
          child: DrawSleepChart(),
        ),
      ),
    );
  }
}

class DrawSleepChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return drawSleep();
  }

  Widget drawSleep() {
    // 创建睡眠模型列表
    List<SleepModel> lists = [];
    {
      SleepModel one = SleepModel(Colors.red, []);
      one.descr = "醒着";
      lists.add(one);
    }
    {
      SleepModel one = SleepModel(Colors.grey, []);
      one.descr = "快速眼动";
      lists.add(one);
    }
    {
      SleepModel one = SleepModel(Colors.green, []);
      one.descr = "浅睡";
      lists.add(one);
    }
    {
      SleepModel one = SleepModel(Colors.blue, []);
      one.descr = "深睡";
      lists.add(one);
    }

    int index = -1;

    SleepModel? beforeModel;

    for (int i = 0; i < 60 * 7; i++) {
      var a = Random().nextInt(99) + 0;
      // var b = a.floor();

      if (a < 81) {
        index = 3;
      } else if (a < 95) {
        index = 2;
      } else if (a < 98) {
        index = 1;
      } else {
        index = 0;
      }
      SleepModel nowModel = lists[index];

      if (beforeModel != nowModel) { // 上一个还是这个数据
        if (beforeModel != null) {
          Range values = beforeModel.lists.last;
          values.end = i;
          // print("$a 开始：${values.start}  结束：${values.end}");
          // print("开始：${beforeModel.descr}  结束：${nowModel.descr}");
        }
        Range values = Range(i, i + 1);
        nowModel.lists.add(values);
      } else {
        if (i == 7 * 60 - 1 && beforeModel != null) {
          Range values = beforeModel.lists.last;
          values.end = i;
          print("开始：${values.start}  结束：${values.end}");
        }
      }
      beforeModel = nowModel;
    }
    return Expanded(child: SleepWidget(lists, 23 * 60, 6 * 60));
  }
}

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

itying888 1楼•2 个月前

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

chart_view 是一个用于在 Flutter 中展示图表的插件。它支持多种图表类型，如折线图、柱状图、饼图等，并且具有高度可定制性。以下是如何在 Flutter 项目中使用 chart_view 插件的步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 chart_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  chart_view: ^1.0.0  # 请检查最新版本

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

2. 基本使用示例

以下是一个简单的折线图示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chart View Example'),
        ),
        body: Center(
          child: LineChart(
            data: [
              ChartData(1, 10),
              ChartData(2, 15),
              ChartData(3, 7),
              ChartData(4, 20),
              ChartData(5, 12),
            ],
            xAxisLabel: 'X Axis',
            yAxisLabel: 'Y Axis',
            chartTitle: 'Sample Line Chart',
          ),
        ),
      ),
    );
  }
}

3. 解释代码

LineChart: 这是 chart_view 插件中的一个组件，用于展示折线图。
ChartData: 这是一个数据类，用于表示图表中的每个数据点。它接受两个参数：x 和 y，分别表示数据点的横坐标和纵坐标。
xAxisLabel 和 yAxisLabel: 用于设置 X 轴和 Y 轴的标签。
chartTitle: 设置图表的标题。

4. 其他图表类型

chart_view 插件还支持其他类型的图表，如柱状图、饼图等。以下是一个柱状图的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chart View Example'),
        ),
        body: Center(
          child: BarChart(
            data: [
              ChartData(1, 10),
              ChartData(2, 15),
              ChartData(3, 7),
              ChartData(4, 20),
              ChartData(5, 12),
            ],
            xAxisLabel: 'X Axis',
            yAxisLabel: 'Y Axis',
            chartTitle: 'Sample Bar Chart',
          ),
        ),
      ),
    );
  }
}

5. 自定义图表

chart_view 插件允许你自定义图表的颜色、字体、间距等属性。例如，你可以通过传递 LineChartStyle 或 BarChartStyle 来自定义图表的外观：

LineChart(
  data: [
    ChartData(1, 10),
    ChartData(2, 15),
    ChartData(3, 7),
    ChartData(4, 20),
    ChartData(5, 12),
  ],
  xAxisLabel: 'X Axis',
  yAxisLabel: 'Y Axis',
  chartTitle: 'Custom Line Chart',
  style: LineChartStyle(
    lineColor: Colors.blue,
    pointColor: Colors.red,
    backgroundColor: Colors.grey[200],
    textStyle: TextStyle(color: Colors.black, fontSize: 14),
  ),
);