查找图表中的最大值 Flutter

Question

我正在使用 syncfusion_flutter_charts 包创建图表。我需要进行值检查并将具有最大值的列显示为红色。告诉我如何正确放置条件/循环以检查 y 轴的值并将较大的值重新着色为红色？我将不胜感激。

图表

class ChartWidget extends StatefulWidget {
  const ChartWidget({Key? key}) : super(key: key);

  @override
  State<ChartWidget> createState() => _ChartWidget();
}

class _ChartWidget extends State<ChartWidget> {
  late List<_ChartData> data;
  TooltipBehavior? _tooltipBehavior;

  @override
  void initState() {
    data = [
      _ChartData('6:00', 18),
      _ChartData('7:00', 11),
      _ChartData('8:00', 14),
      _ChartData('9:00', 5),
      _ChartData('10:00', 16),
      _ChartData('11:00', 13),
      _ChartData('12:00', 15),
      _ChartData('13:00', 1),
      _ChartData('14:00', 2),
      _ChartData('15:00', 15),
      _ChartData('16:00', 18),
      _ChartData('17:00', 11),
      _ChartData('18:00', 14),
      _ChartData('19:00', 5),
      _ChartData('20:00', 16),
      _ChartData('21:00', 13),
      _ChartData('22:00', 20),
      _ChartData('23:00', 1),
      _ChartData('24:00', 2),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _buildColumnChart();
  }

  SfCartesianChart _buildColumnChart() {
    return SfCartesianChart(
      plotAreaBorderWidth: 0,
      zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
      primaryXAxis: CategoryAxis(
        interval: 3,
        visibleMaximum: 16,
        axisLine: const AxisLine(width: 0),
        labelStyle: constants.Styles.xxTinyLtStdTextStyleWhite,
        majorTickLines: const MajorTickLines(width: 0),
        majorGridLines: const MajorGridLines(width: 0),
      ),
      primaryYAxis:
          NumericAxis(isVisible: false, minimum: 0, maximum: 20, interval: 1),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries<_ChartData, String>>[
        ColumnSeries<_ChartData, String>(
            dataSource: data,
            color: constants.Colors.greyMiddle,
            borderColor: constants.Colors.greyChart,
            borderWidth: 1,
            borderRadius: BorderRadius.circular(4),
            xValueMapper: (_ChartData data, _) => data.x,
            yValueMapper: (_ChartData data, _) => data.y,
            name: 'Test'),
      ],
    );
  }
}

class _ChartData {
  _ChartData(this.x, this.y);

  final String x;
  final double y;
}

这是想要的结果

Answer 1

这是我使用的代码，最终输出为 'largest value is 20 and index: 16'

void main() {


  var data = [
      _ChartData('6:00', 18),
      _ChartData('7:00', 11),
      _ChartData('8:00', 14),
      _ChartData('9:00', 5),
      _ChartData('10:00', 16),
      _ChartData('11:00', 13),
      _ChartData('12:00', 15),
      _ChartData('13:00', 1),
      _ChartData('14:00', 2),
      _ChartData('15:00', 15),
      _ChartData('16:00', 18),
      _ChartData('17:00', 11),
      _ChartData('18:00', 14),
      _ChartData('19:00', 5),
      _ChartData('20:00', 16),
      _ChartData('21:00', 13),
      _ChartData('22:00', 20),
      _ChartData('23:00', 1),
      _ChartData('24:00', 2),
    ];


  double largest_val = 0.0;
  int largest_val_index = 0;


  for(int k = 0; k < data.length; k++){
    if(data[k].y >largest_val){
      largest_val = data[k].y;
      largest_val_index = k;
    }    
  }

  print('largest value is ${largest_val} and index: ${largest_val_index}');

}

class _ChartData {
  _ChartData(this.x, this.y);

  final String x;
  final double y;
}

变量largest_val_index可用于获取列表中的索引data而largest_val给出最大值。

执行时应删除 void main()。

Answer 2

您可以使用pointColorMapper

求最大值

 double maxValue = 0;


    //loop list of _ChartData to compare its y value and find the max
    data.forEach((data){
      if(data.y>maxValue) {
      maxValue = data.y;
     }
   });

然后不使用颜色，而是使用 pointColorMapper

      //Instead of 
      color: constants.Colors.greyMiddle,

      //use
      pointColorMapper: (_ChartData data,_){ 
          if(data.y == maxValue){
            return constants.Colors.YourRedColor;
          }
          else{
            return constants.Colors.greyMiddle;
          }
      },

Answer 3

要对一个点使用特定的颜色，可以使用pointColorMapper 属性。从您的数据源中找到最大值 y-value，然后您可以使用 pointColorMapper 将颜色应用到每个点。我们附上了下面的代码

late double yMaximum = 0;

  @override
  void initState() {
    data = [
      //Your data
    ];
    getMax(data);
    super.initState();
  }

  void getMax(List<_ChartData> data) {
    for (int i = 0; i < data.length; i++)
      if (data[i].y > yMaximum) yMaximum = data[i].y;
  }


    SfCartesianChart(
          //Other properties
           series: <ChartSeries<_ChartData, String>>[
            ColumnSeries<_ChartData, String>(
                pointColorMapper: (_ChartData data, _) =>
                    data.y == yMaximum ? constants.Colors.YourRedColor : constants.Colors.greyMiddle,
            ),
          ],
        )

我们已经有了一个演示示例，可以使用 pointColorMapper 根据 y-value 应用颜色，可以在下面找到。

Demo UG

查找图表中的最大值 Flutter

Find the largest value in the chart Flutter

flutter

dart

syncfusion