提问人:Florencia Ferrer 提问时间:9/29/2023 更新时间:9/29/2023 访问量:27
Flutter Chart - 标记点(最小值/最大值)并维护 getTouchedSpotIndicator 的行为
Flutter Chart - Label points (min/max) and maintain behavior of getTouchedSpotIndicator
问:
我正在 https://pub.dev/packages/fl_chart 使用这个包,并尝试在图表中标记最小值和最大值,如下图所示: 目标 现在我有这个我所拥有的。
具体来说,我需要像第一张图片一样标记最小值和最大值,但是当用户触摸图表时,行为是这样的
,在此处输入图像描述
我已经坚持了几个星期,找不到任何这样的信息或主题,拜托🙏.
我看到了这个示例 https://github.com/imaNNeo/fl_chart/blob/master/example/lib/presentation/samples/line/line_chart_sample5.dart 带有点的示例,但是在执行该代码之后,我丢失了一些我需要的行为,例如触摸任何其他点并显示信息。
我正在使用 LineChartData,这是我的代码:
LineChart(
swapAnimationDuration:
Duration(milliseconds: 200),
swapAnimationCurve: Curves.decelerate,
LineChartData(
gridData: FlGridData(
show: false,
),
borderData: FlBorderData(
show: false,
),
titlesData: FlTitlesData(
show: false,
),
lineTouchData: LineTouchData(
enabled: true,
getTouchLineStart:
(LineChartBarData barData, int spotIndex) {
return 0.0;
},
getTouchLineEnd:
(LineChartBarData barData, int spotIndex) {
return max;
},
getTouchedSpotIndicator: (barData, spotIndexes) {
return spotIndexes.map((spotIndex) {
final FlSpot spot = barData.spots[spotIndex];
if (spot.x == 0 || spot.x == 1) {
return null;
}
return TouchedSpotIndicatorData(
FlLine(
color: HexColor(widget.currency.color),
strokeWidth: 1,
dashArray: [5, 7]),
FlDotData(
show: true,
getDotPainter:
(spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 10,
color: Color(int.parse(
widget.currency.color
.replaceAll("#", ""),
radix: 16))
.withOpacity(0.7),
strokeWidth: 1,
strokeColor: Colors.green,
);
},
),
);
}).toList();
},
touchCallback: (p0, p1) {
if (p0.isInterestedForInteractions == false) {
change = true;
setState(() {
balance = widget.currency.balance;
});
Future.delayed(
const Duration(milliseconds: 300))
.then((value) {
if (change) {
setState(() {
balanceWidget = widget.title;
});
}
});
return;
}
if (p1 == null) {
return;
}
if (p1.lineBarSpots?.first == null) {
return;
}
change = false;
setState(() {
balance = p1.lineBarSpots!.first.y.toString();
balanceWidget = updateBalanceWidget();
});
},
touchTooltipData: LineTouchTooltipData(
fitInsideHorizontally: true,
showOnTopOfTheChartBoxArea: true,
tooltipBgColor: customColors.background3,
getTooltipItems: (touchedSpots) {
return touchedSpots.map(
(LineBarSpot touchedSpot) {
const textStyle = TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.white,
fontFamily: 'Poppins');
return LineTooltipItem(
DateFormat('yyyy/MM/dd').format(widget
.chartData[touchedSpot.spotIndex]
.date),
textStyle,
);
},
).toList();
},
)),
minX: widget
.chartData.first.date.millisecondsSinceEpoch
.toDouble(),
maxX: widget
.chartData.last.date.millisecondsSinceEpoch
.toDouble(),
minY: min,
maxY: max,
lineBarsData: [
LineChartBarData(
curveSmoothness: 0.2,
spots: flSpotData,
isCurved: true,
color: HexColor(widget.currency.color),
dotData: FlDotData(show: false),
barWidth: 3,
isStrokeCapRound: true,
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: gradientColors,
),
),
),
],
),
)
答: 暂无答案
评论