Article directory
Introduction
fl_chartIt is the most comprehensive and powerful chart library in Flutter. The position in flutteris equivalent to the front-end echartsand android-sideMPAndroidChart
Support common LineChart (line chart), BarChart (histogram), PieChart (pie chart).
Library address: https://pub-web.flutter-io.cn/packages/fl_chart
easy to use
The library documentation provides detailed api descriptions, but it is too formalistic, and it is all descriptions of parameters.
There is no simple use of each diagram, only example codes are provided, you need to see it yourself, it is very unfriendly to unfamiliar people!
The following are the instructions for the fastest use that I have compiled after using it.
line chart
histogram
_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;
}