Flutter Chart - 标记点(最小值/最大值)并维护 getTouchedSpotIndicator 的行为

Flutter Chart - Label points (min/max) and maintain behavior of getTouchedSpotIndicator

提问人:Florencia Ferrer 提问时间:9/29/2023 更新时间:9/29/2023 访问量:27

问:

我正在 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,
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
Flutter 标签 显示 FL-Chart

评论


答: 暂无答案