简介
fl_chart是Flutter中功能最全、最强大的图表库。在flutter中的地位相当于前端的echarts、android端的MPAndroidChart
支持常见的LineChart(折线图)、BarChart(柱状图)、PieChart(饼图)。
库地址：https://pub-web.flutter-io.cn/packages/fl_chart
简单使用
库文档提供了详细的api说明，但是太过形式主义，全是对参数的说明。
没有每种图的简单使用，只提供了例子代码，需要自己去看，对不熟悉的人非常不友好！
以下是我经过使用后整理出来的最快速使用的说明。
折线图
柱状图
_buildBarChart() {
return BarChart(
BarChartData(
/// 格式线样子设置
gridData: FlGridData(
/// 是否隐藏垂直线
drawVerticalLine: false,
/// 水平线的间隔值
horizontalInterval: 10,
/// 水平线样式
getDrawingHorizontalLine: (v) {
return FlLine(
color: Color(0xffe5e5e5),
strokeWidth: 1,
);
},
),
/// 边框样式
borderData: FlBorderData(
border: const Border(
top: BorderSide(width: 1),
right: BorderSide(width: 1),
left: BorderSide(width: 1),
bottom: BorderSide(width: 1),
)),
/// y轴最大值，从0开始
maxY: maxYValue,
/// Bar的数据集合及样式
barGroups: _generateBar(values),
/// 只有在alignment为center时，groupsSpace才生效。否则会按宽度平分。
groupsSpace: 30,
alignment: BarChartAlignment.center,
/// 上下左右标题设置
titlesData: FlTitlesData(
show: true,
/// 左侧标题
leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
/// 顶部标题
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
/// 底部标题
bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
/// 右侧标题
rightTitles: AxisTitles(
sideTitles: SideTitles(
/// 是否显示标题
showTitles: true,
/// 标题宽度
reservedSize: rightTitleWidth,
/// 标题间隔
interval: 10,
/// 返回标题Widget
getTitlesWidget: (y, meta) {
return SideTitleWidget(
child: LayoutBuilder(
builder: (ctx, constraint) {
return SizedBox(
width: constraint.maxWidth,
child: CommonWidget.commonText(
"${
y.toInt() - 120}dBm",
fontSize: 8,
fontWeight: FontWeight.bold,
color: Color(titleColor),
textAlign: TextAlign.center,
),
);
},
),
axisSide: meta.axisSide,
space: 0,
);
})),
),
/// 点击bar时显示的内容
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
getTooltipItem: (group, groupIndex, rod, rodIndex) {
final textStyle = TextStyle(
color: rod.color,
fontWeight: FontWeight.bold,
fontSize: 14,
);
return BarTooltipItem(
(rod.toY - 120).toInt().toString(), textStyle);
}),
),
),
);
}
_generateBar(List<SingleBandModel> list) {
var bars = list<BarChartGroupData>.generate(5,(index) {
/// 每个bar的数据
return BarChartGroupData(
/// bar的x坐标
x: index,
/// 支持多组bar
barRods: [
BarChartRodData(
/// y轴最小值
fromY: 0,
/// y轴值
toY: y,
/// bar的宽度
width: 20,
/// bar颜色
color: progressColor,
/// 渐变色。如果设置了渐变，color会失效。
gradient: LinearGradient(),
/// 总进度条
backDrawRodData: BackgroundBarChartRodData(
show: true, color: Color(0xffe5e5e5), toY: 80),
),
],
);
}).toList();
return bars;
}