Flutter 如何向 fl_chart 添加裁剪器 (CustomPainter)

Question

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

我的快速修复（我删除了过渡动画，但我想使用动画）：

忽略y轴（左边）的label bug

（如果您没有看到错误，请仔细查看右侧）

我想使用这样的过渡，但图表不会超出边界：

代码如下：

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()。

Flutter 如何向 fl_chart 添加裁剪器 (CustomPainter)

Flutter how to add a clipper to fl_chart (CustomPainter)

clipping

flutter

fl-chart