Flutter图表绘制插件f_line_chart的使用
Flutter图表绘制插件f_line_chart的使用
效果展示
1. 基础效果
2. 显示节点的效果
3. 显示选中的效果
4. 显示y轴数据
5. 多折线版本
入门
以下是f_line_chart插件的一些常用属性：
class LineChart extends StatefulWidget {
// 数据
final List<LineChartPoint>? points;
// 折线图颜色
final Color lineColor;
// 折线图宽度
final double lineWidth;
// 背景色
final Color bgColor;
// 折线图大小
final Size size;
// 水平方向的线的颜色
final Color xAxisColor;
// 水平方向的线的宽度
final double xAxisWidth;
// 垂直方向的线的颜色
final Color yAxisColor;
// 垂直方向的线的宽度
final double yAxisWidth;
// 是否绘制y轴
final bool showYAxis;
// x轴条数 最上面的一条是整个chart的顶部
final int xLineNums;
// 是否显示x轴下方文字
final bool showXLineText;
// x轴下方文字颜色
final Color xLineTextColor;
/// 折线图上点的设置
final LineChartPointConfig? config;
/// 显示Y轴上的标记文案
final bool showYLineMark;
// 节点选中时回调
final SelectedCallback? selectedCallback;
// 多条折线
final List<List<LineChartPoint>>? multipleLinePoints;
// 多条折线的颜色
final List<Color>? multipleLinePointsColor;
// 自定义x轴下方的标记文案，如果传入该数据，points中的marks失效。
final List<String>? xLineMarks;
}使用介绍
基础使用方法
下面是最简单的使用demo
class LineChartPage extends StatelessWidget {
const LineChartPage({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("f_line_chart"),
),
body: Center(
child: Container(
margin: const EdgeInsets.all(50),
child: LineChart(
size: const Size(300, 200),
// 水平方向线条个数
xLineNums: 6,
points: _mockData(),
// 是否显示x轴下面的文案
showXLineText: true,
),
),
),
);
}
List<LineChartPoint> _mockData() {
var res = <LineChartPoint>[];
res.add(LineChartPoint(xStr: "01", xValue: 1, yStr: "100", yValue: 200));
res.add(LineChartPoint(xStr: "02", xValue: 2, yStr: "200", yValue: 120));
res.add(LineChartPoint(xStr: "03", xValue: 3, yStr: "300", yValue: 150));
res.add(LineChartPoint(xStr: "04", xValue: 4, yStr: "400", yValue: 100));
res.add(LineChartPoint(xStr: "05", xValue: 5, yStr: "400", yValue: 210));
res.add(LineChartPoint(xStr: "06", xValue: 6, yStr: "400", yValue: 50));
res.add(LineChartPoint(xStr: "07", xValue: 7, yStr: "300", yValue: 150));
res.add(LineChartPoint(xStr: "08", xValue: 8, yStr: "400", yValue: 230));
res.add(LineChartPoint(xStr: "09", xValue: 9, yStr: "400", yValue: 105));
res.add(LineChartPoint(xStr: "10", xValue: 10, yStr: "400", yValue: 149));
return res;
}
}运行效果如下：
LineChartPointConfig
通过配置LineChartPointConfig来设置是否要显示节点，以及节点的颜色、大小等属性。
class LineChartPointConfig {
// 普通节点的颜色
final Color normalPonitColor;
// 普通节点的半径
final double normalPointRadius;
// 选中节点的颜色
final Color selectedPointColor;
// 选中节点的样式
final double selectedPointRadius;
// 是否显示节点
final bool showNormalPoints;
// 是否显示选中节点
final bool showSelectedPoint;
// 选中时的垂直线的颜色
final Color selectedLineColor;
// 选中时的垂直线的宽度
final double selectedLineWidth;
// 显示选中时的垂直线
final bool showSelectedLine;
LineChartPointConfig({
this.normalPonitColor = const Color(0xFF1678FF),
this.selectedPointColor = const Color(0xFF1678FF),
this.selectedLineColor = const Color(0xFFA6A6A6),
this.showSelectedLine = false,
this.selectedLineWidth = 1,
this.normalPointRadius = 2,
this.selectedPointRadius = 4,
this.showNormalPoints = false,
this.showSelectedPoint = false,
});
}简单使用如下
body: Center(
child: Container(
margin: const EdgeInsets.all(50),
child: LineChart(
bgColor: const Color(0xFFF7F8FA),
size: const Size(300, 200),
xLineNums: 6,
points: _mockData(),
showXLineText: true,
config: LineChartPointConfig(
showNormalPoints: true,
),
),
),
),效果如下：
设置选中竖线和选中圆环
body: Center(
child: Container(
margin: const EdgeInsets.all(50),
child: LineChart(
bgColor: const Color(0xFFF7F8FA),
size: const Size(300, 200),
xLineNums: 6,
points: _mockData(),
showXLineText: true,
config: LineChartPointConfig(
showNormalPoints: true,
showSelectedLine: true,
showSelectedPoint: true,
),
),
),
),效果如下：
显示Y轴以及显示y轴上的单元数据
body: Center(
child: Container(
margin: const EdgeInsets.all(50),
child: LineChart(
size: const Size(300, 200),
xLineNums: 6,
points: _mockData1(),
showXLineText: true,
// 显示y轴
showYAxis: true,
// 显示y轴上的标记文案
showYLineMark: true,
config: LineChartPointConfig(
showNormalPoints: true,
showSelectedLine: true,
showSelectedPoint: true,
),
),
),
),效果如下：
设置节点选中回调
LineChart(
...
selectedCallback: (offset, point) {
debugPrint(
" selectedCallback offset : x ${offset.dx} y ${offset.dy} point ${point.xStr}",
);
},
...
),显示多条折线
通过multipleLinePoints设置多条折线的数据和multipleLinePointsColor设置颜色。
class LineChartPage extends StatefulWidget {
const LineChartPage({Key? key}) : super(key: key);
[@override](/user/override)
State<LineChartPage> createState() => _LineChartPageState();
}
class _LineChartPageState extends State<LineChartPage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("f_line_chart"),
),
body: Center(
child: Container(
margin: const EdgeInsets.all(50),
child: LineChart(
size: const Size(300, 200),
xLineNums: 6,
multipleLinePoints: _mockData1(),
multipleLinePointsColor: const [
Color(0xFFFF9E3D),
Color(0xFF006BFF),
Color(0xFF24A69B),
],
showXLineText: true,
showYAxis: false,
showYLineMark: false,
selectedCallback: (Offset offset, List<LineChartPoint>? points) {
if (points == null) return;
debugPrint(
" selectedCallback offset : x ${offset.dx} y ${offset.dy} ",
);
for (var element in points) {
debugPrint(
"selected points :${element.xValue} ${element.yValue}",
);
}
},
config: LineChartPointConfig(
showNormalPoints: true,
showSelectedLine: true,
showSelectedPoint: true,
),
),
),
),
);
}
List<List<LineChartPoint>> _mockData1() {
var res = <LineChartPoint>[];
res.add(LineChartPoint(xStr: "01", xValue: 1, yStr: "100", yValue: 102));
res.add(LineChartPoint(xStr: "02", xValue: 2, yStr: "200", yValue: 130));
res.add(LineChartPoint(xStr: "03", xValue: 3, yStr: "300", yValue: 110));
res.add(LineChartPoint(xStr: "04", xValue: 4, yStr: "400", yValue: 120));
res.add(LineChartPoint(xStr: "05", xValue: 5, yStr: "400", yValue: 170));
res.add(LineChartPoint(xStr: "06", xValue: 6, yStr: "400", yValue: 110));
res.add(LineChartPoint(xStr: "07", xValue: 7, yStr: "300", yValue: 130));
res.add(LineChartPoint(xStr: "08", xValue: 8, yStr: "400", yValue: 234));
res.add(LineChartPoint(xStr: "09", xValue: 9, yStr: "400", yValue: 110));
res.add(LineChartPoint(xStr: "10", xValue: 10, yStr: "400", yValue: 140));
var res1 = <LineChartPoint>[];
res1.add(LineChartPoint(xStr: "01", xValue: 1, yStr: "100", yValue: 110));
res1.add(LineChartPoint(xStr: "02", xValue: 2, yStr: "200", yValue: 140));
res1.add(LineChartPoint(xStr: "03", xValue: 3, yStr: "300", yValue: 120));
res1.add(LineChartPoint(xStr: "04", xValue: 4, yStr: "400", yValue: 100));
res1.add(LineChartPoint(xStr: "05", xValue: 5, yStr: "400", yValue: 160));
res1.add(LineChartPoint(xStr: "06", xValue: 6, yStr: "400", yValue: 100));
res1.add(LineChartPoint(xStr: "07", xValue: 7, yStr: "300", yValue: 120));
res1.add(LineChartPoint(xStr: "08", xValue: 8, yStr: "400", yValue: 210));
res1.add(LineChartPoint(xStr: "09", xValue: 9, yStr: "400", yValue: 70));
res1.add(LineChartPoint(xStr: "10", xValue: 10, yStr: "400", yValue: 80));
var res2 = <LineChartPoint>[];
res2.add(LineChartPoint(xStr: "01", xValue: 1, yStr: "100", yValue: 140));
res2.add(LineChartPoint(xStr: "02", xValue: 2, yStr: "200", yValue: 160));
res2.add(LineChartPoint(xStr: "03", xValue: 3, yStr: "300", yValue: 110));
res2.add(LineChartPoint(xStr: "04", xValue: 4, yStr: "400", yValue: 100));
res2.add(LineChartPoint(xStr: "05", xValue: 5, yStr: "400", yValue: 160));
res2.add(LineChartPoint(xStr: "06", xValue: 6, yStr: "400", yValue: 80));
res2.add(LineChartPoint(xStr: "07", xValue: 7, yStr: "300", yValue: 100));
res2.add(LineChartPoint(xStr: "08", xValue: 8, yStr: "400", yValue: 150));
res2.add(LineChartPoint(xStr: "09", xValue: 9, yStr: "400", yValue: 60));
res2.add(LineChartPoint(xStr: "10", xValue: 10, yStr: "400", yValue: 80));
var mutil = [res, res1, res2];
return mutil;
}
}
1 回复
更多关于Flutter图表绘制插件f_line_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
f_line_chart 是一个用于在 Flutter 中绘制折线图的插件。它提供了简单易用的 API，可以帮助你快速创建和自定义折线图。以下是如何使用 f_line_chart 插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 f_line_chart 插件的依赖：
dependencies:
flutter:
sdk: flutter
f_line_chart: ^0.1.0 # 请检查最新版本然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 f_line_chart 包：
import 'package:f_line_chart/f_line_chart.dart';3. 创建折线图
使用 FLineChart 组件来创建折线图。你需要提供一些数据点和配置选项。
class MyLineChart extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Line Chart Example'),
),
body: Center(
child: FLineChart(
data: [
FLineChartData(
x: 0,
y: 10,
),
FLineChartData(
x: 1,
y: 20,
),
FLineChartData(
x: 2,
y: 15,
),
FLineChartData(
x: 3,
y: 30,
),
FLineChartData(
x: 4,
y: 25,
),
],
lineColor: Colors.blue,
pointColor: Colors.red,
lineWidth: 2.0,
pointRadius: 4.0,
showPoints: true,
showGrid: true,
gridColor: Colors.grey[300]!,
gridStep: 10,
),
),
);
}
}4. 运行应用
将 MyLineChart 组件添加到你的应用中，并运行应用以查看折线图。
void main() {
runApp(MaterialApp(
home: MyLineChart(),
));
}5. 自定义选项
f_line_chart 提供了多种自定义选项，例如：
lineColor: 折线的颜色。pointColor: 数据点的颜色。lineWidth: 折线的宽度。pointRadius: 数据点的半径。showPoints: 是否显示数据点。showGrid: 是否显示网格。gridColor: 网格的颜色。gridStep: 网格的步长。
你可以根据需要调整这些选项来定制你的折线图。
6. 处理动态数据
如果你的数据是动态的，你可以使用 setState 来更新图表数据。
class MyLineChart extends StatefulWidget {
[@override](/user/override)
_MyLineChartState createState() => _MyLineChartState();
}
class _MyLineChartState extends State<MyLineChart> {
List<FLineChartData> data = [
FLineChartData(x: 0, y: 10),
FLineChartData(x: 1, y: 20),
FLineChartData(x: 2, y: 15),
FLineChartData(x: 3, y: 30),
FLineChartData(x: 4, y: 25),
];
void updateData() {
setState(() {
data.add(FLineChartData(x: data.length, y: 40));
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Line Chart Example'),
),
body: Center(
child: FLineChart(
data: data,
lineColor: Colors.blue,
pointColor: Colors.red,
lineWidth: 2.0,
pointRadius: 4.0,
showPoints: true,
showGrid: true,
gridColor: Colors.grey[300]!,
gridStep: 10,
),
),
floatingActionButton: FloatingActionButton(
onPressed: updateData,
child: Icon(Icons.add),
),
);
}
}