颤振如何将剪辑器添加到fl_chartCustomPainter

编程问答 2022-08-15

问题描述

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

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

fl_chart quick fix

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

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

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

bugged fl_chart

代码如下：

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),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),4]
          );
        },titlesData: FlTitlesData(
        show: true,bottomTitles: SideTitles(
          showTitles: true,reservedSize: 14,textStyle:
          const TextStyle(
            color: Color.fromARGB(255,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,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),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),);
  }

解决方法

LinechartData中有一个clipData属性

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

clippingfl-chart