Flutter 图表插件 fl_chart 使用研究(二)

在上一篇博文中 ,我们用fl_chart插件画出了一个最简单的两条曲线的折线图,下面再说以下其余的参数的含义。

回顾以下上一篇结尾的代码:

return LineChart(
      LineChartData(
        lineBarsData: [
          LineChartBarData(
            spots: spots1,
          ),
          LineChartBarData(
            spots: spots2,
          ),
        ],
      ),
    );

我们知道,lineBarsData参数,代表我们要画的曲线,它是一个LineChartBarData对象的数组,每一项代表一条曲线。在LineChartBarData类的构造函数中,spots命名参数代表曲线上点的集合。

接着再看看LineChartBarData类构造函数的其他命名参数的含义吧。(比较重要的)

colors:颜色数组,曲线的颜色,如果数组中只有一个颜色,那么画出的曲线是单一颜色的,否者就会有渐变颜色效果。

barWidth:线宽度。

isCurved:上面的代码,画出的曲线是折线,也就是不带平滑处理的,如果希望画出的线是平滑的,需要在LineChartBarData类的构造函数中指定isCurved参数,值为true.

LineChartBarData类的其他构造参数,含义请读者自行研究吧。

在上面的代码中,加入上面说的几个参数,运行一下看看效果。

return LineChart(
      LineChartData(
        lineBarsData: [
          LineChartBarData(
            spots: spots1,
            isCurved: true,
            colors: [Colors.green, Colors.blue],
            barWidth: 4.0,
          ),
          LineChartBarData(
            spots: spots2,
            isCurved: true,
            colors: [Colors.yellowAccent],
            barWidth: 2.0,
          ),
        ],
      ),
    );

 

下面是一个使用fl_chart库创建饼图的简单示例: ```dart import 'package:flutter/material.dart'; import 'package:fl_chart/fl_chart.dart'; class PieChartSample extends StatefulWidget { @override _PieChartSampleState createState() => _PieChartSampleState(); } class _PieChartSampleState extends State<PieChartSample> { int touchedIndex; @override Widget build(BuildContext context) { return AspectRatio( aspectRatio: 1, child: PieChart( PieChartData( pieTouchData: PieTouchData(touchCallback: (pieTouchResponse) { setState(() { if (pieTouchResponse.touchInput is FlLongPressEnd || pieTouchResponse.touchInput is FlPanEnd) { touchedIndex = -1; } else { touchedIndex = pieTouchResponse.touchedSectionIndex; } }); }), borderData: FlBorderData(show: false), sectionsSpace: 0, centerSpaceRadius: 40, sections: getSections(), ), ), ); } List<PieChartSectionData> getSections() { return List.generate(4, (i) { final isTouched = i == touchedIndex; final double fontSize = isTouched ? 25 : 16; final double radius = isTouched ? 60 : 50; switch (i) { case 0: return PieChartSectionData( color: Colors.red, value: 40, title: '40%', radius: radius, titleStyle: TextStyle( fontSize: fontSize, fontWeight: FontWeight.bold, color: const Color(0xffffffff), ), ); case 1: return PieChartSectionData( color: Colors.green, value: 30, title: '30%', radius: radius, titleStyle: TextStyle( fontSize: fontSize, fontWeight: FontWeight.bold, color: const Color(0xffffffff), ), ); case 2: return PieChartSectionData( color: Colors.blue, value: 15, title: '15%', radius: radius, titleStyle: TextStyle( fontSize: fontSize, fontWeight: FontWeight.bold, color: const Color(0xffffffff), ), ); case 3: return PieChartSectionData( color: Colors.yellow, value: 15, title: '15%', radius: radius, titleStyle: TextStyle( fontSize: fontSize, fontWeight: FontWeight.bold, color: const Color(0xffffffff), ), ); default: return null; } }); } } ``` 在这个例子中,我们创建了一个PieChartSample类,它继承自StatefulWidget。在build()方法中,我们创建了一个AspectRatio小部件,它将PieChart小部件的宽高比设置为1:1。然后,我们创建了一个PieChart小部件,它接收一个PieChartData对象作为参数。PieChartData对象包含所有的饼图数据,包括饼图的颜色、半径、标题、值等。 在PieChartData对象中,我们使用了PieTouchData对象来处理用户的触摸事件。我们还使用FlBorderData对象来隐藏边框,使用sectionsSpace属性来设置饼图部分之间的间距,使用centerSpaceRadius属性来设置中心空间的半径。 在getSections()函数中,我们生成了饼图的各个部分。每个部分都由一个PieChartSectionData对象表示,它包括颜色、半径、值、标题和标题样式等属性。我们返回一个包含所有部分的列表,然后将它们传递给PieChartData对象。 最后,我们在PieTouchData对象的touchCallback属性中处理触摸事件。如果用户停止触摸饼图,我们将touchedIndex设置为-1,否则,我们将touchedIndex设置为当前触摸部分的索引。根据touchedIndex的值,我们可以设置饼图部分的半径和标题样式,以突出显示当前触摸的部分。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值