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

Posted 2023-03-23

【中文标题】Flutter 如何将裁剪器添加到 fl_chart (CustomPainter)

【英文标题】：Flutter how to add a clipper to fl_chart (CustomPainter)

【发布时间】：2020-12-11 08:01:21

【问题描述】：

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

---

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

---

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

（如果你没有看到右边的 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),
          ),
        ),
      ],
    );
  

【参考方案1】：

LinechartData 中有一个clipData 属性

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