颤振如何将剪辑器添加到fl_chart（CustomPainter）

Question

我有一个fl_chart (pub)，下面显示在gif中。转换数据时，画家会在图表范围之外绘画。我如何在下面的图表中添加clipper（或其他修复程序），所以不会发生此错误？底部有一些代码和一些图像。 fl_chart使用CustomPainter绘制图表，所以也许我可以覆盖源代码中的某些内容？

---

我的快速解决方案（我删除了过渡动画，但我想使用该动画）：

---

忽略y轴（左侧）上的标签错误

（如果看不到该错误，请看右侧）

我想使用这样的过渡方式，但不要使图表超出界限：

---

代码如下：

LineChartData mainData() {
    return LineChartData(
      lineTouchData: LineTouchData(
        touchTooltipData: LineTouchTooltipData(
          fitInsideHorizontally: true,
          tooltipBgColor: Colors.white,
          getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
            return touchedBarSpots.map((barSpot) {
              return LineTooltipItem(
                '${barSpot.y.toInt()}',
                TextStyle(
                  fontFamily: 'Jost*',
                  fontSize: 15,
                  color: Colors.black,
                ),
              );
            }).toList();
          }
        ),
        getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
          return spotIndexes.map((spotIndex) {
            return TouchedSpotIndicatorData(
              FlLine(
                color: const Color.fromARGB(255, 77, 77, 77),
                strokeWidth: 1,
                dashArray: [4,4],
              ),
              FlDotData(
                getDotPainter: (spot, percent, barData, index) {
                  return FlDotCirclePainter(
                    radius: 5.5,
                    color: gradientColors[0],
                    strokeWidth: 2,
                    strokeColor: Colors.white,
                  );
                },
              ),
            );
          }).toList();
        }
      ),
      gridData: FlGridData(
        show: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color.fromARGB(255, 98, 95, 161),
            strokeWidth: 1,
            dashArray: [4,4]
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 14,
          textStyle:
          const TextStyle(
            color: Color.fromARGB(255, 181, 181, 181),
            fontWeight: FontWeight.w300,
            fontFamily: 'Jost*',
            fontSize: 13,
          ),
            getTitles: (value) {
              return _labels[widget.timeType][value.toInt()] ?? '';
            },
        ),
        leftTitles: SideTitles(
          showTitles: true,
          textStyle: const TextStyle(
            color: Color.fromARGB(255, 181, 181, 181),
            fontWeight: FontWeight.w300,
            fontFamily: 'Jost*',
            fontSize: 16,
          ),
          getTitles: (value) {
            return (value.toInt()).toString();
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData:
      FlBorderData(
        show: true,
        border: Border.symmetric(
          horizontal: BorderSide(
            color: const Color.fromARGB(255, 170, 170, 170),
            width: 1.2
          ),
        ),
      ),
      minX: 0,
      maxX: _data[widget.timeType].length.toDouble()-1, //length of data set
      minY: _data[widget.timeType].reduce(min).toDouble() - 1,  //set to lowest v
      maxY: _data[widget.timeType].reduce(max).toDouble() + 1,  //set to highest v
      lineBarsData: [
        LineChartBarData(
          spots: [
            for (int i = 0; i < _data[widget.timeType].length; i++)
              FlSpot(i.toDouble(), _data[widget.timeType][i].toDouble())
          ],
          //FlSpot(2.6, 4),
          isCurved: true,
          colors: [
            gradientColors[0],
          ],
          barWidth: 2,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(
            show: true,
            colors: gradientColors,
            gradientColorStops: [0, 0.5, 1.0],
            gradientFrom: const Offset(0, 0),
            gradientTo: const Offset(0, 1),
          ),
        ),
      ],
    );
  }

Answer 1

LinechartData中有一个clipData属性

尝试将其设置为FlClipData.all()。