Flutter简单线性图表绘制插件simple_line_chart的使用

Flutter简单线性图表绘制插件simple_line_chart的使用

简介

simple_line_chart 是一个提供简单线性图表的Flutter插件。该库专注于API的简洁性，具有以下特点：

• 支持多个数据集
• 使用Flutter组件显示文本，以适应系统的字体大小偏好
• 支持贝塞尔曲线（Cubic Bezier Curves）
• 支持多轴
• 支持图例
• 支持高亮显示

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 simple_line_chart 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_line_chart: ^最新版本号

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

2. 创建图表

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 simple_line_chart 插件来创建一个简单的线性图表。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Line Chart Example"),
      ),
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.only(left: 16, right: 16),
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints viewportConstraints) {
              return SingleChildScrollView(
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    minHeight: viewportConstraints.maxHeight,
                  ),
                  child: LineChartContent(),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class LineChartContent extends StatefulWidget {
  [@override](/user/override)
  State<LineChartContent> createState() => _LineChartContentState();
}

class _LineChartContentState extends State<LineChartContent> {
  late final LineChartData data;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 创建数据模型
    data = LineChartData(datasets: [
      Dataset(
        label: 'First', 
        dataPoints: _createDataPoints(offsetInDegrees: 90)
      ),
      Dataset(
        label: 'Second', 
        dataPoints: _createDataPoints(offsetInDegrees: 0)
      ),
      Dataset(
        label: 'Third', 
        dataPoints: _createDataPoints(offsetInDegrees: 180)
      )
    ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(children: [
      Padding(
        padding: EdgeInsets.only(top: 20),
        child: LineChart(
          // 图表样式
          style: LineChartStyle.fromTheme(context),
          seriesHeight: 300,
          // 图表数据
          data: data,
        ),
      ),
    ]);
  }
}

// 创建数据点，这里使用正弦曲线生成数据点，但你可以绘制任何你想要的数据
List<DataPoint> _createDataPoints({required int offsetInDegrees}) {
  List<DataPoint> dataPoints = [];
  final degreesToRadians = (pi / 180);
  for (int x = 0; x < 180; x += 20) {
    final di = (x * 2).toDouble() * degreesToRadians;
    dataPoints.add(DataPoint(
      x: x.toDouble(), 
      y: 100.0 * ((sin(di + offsetInDegrees) + 1.0) / 2.0)
    ));
  }
  return dataPoints;
}