范围条形图多区域颜色 Flutter

Question

我想在 flutter 上找到一个库来进行这种类型的渲染，在单击所选区域时带有 return 回调。有什么想法吗？

Answer 1

在我的示例中：我只需要一个栏，你会在changedListener中找到回调，strokeWidthPxFn用于制作白色边框的选定区域

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class StackedHorizontalBarChart extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => StackedHorizontalBarChartState();
}

class StackedHorizontalBarChartState extends State<StackedHorizontalBarChart>{

  List<charts.Series> seriesList;
  int count = 0;
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    // For horizontal bar charts, set the [vertical] flag to false.
    seriesList = _createSampleData(5 + count);

    return new charts.BarChart(
      seriesList,
      animate: false,
      //barGroupingType: charts.BarGroupingType.stacked,
      vertical: false,
      selectionModels: [
        charts.SelectionModelConfig (
          changedListener: (charts.SelectionModel model) {
            //final selectedDatum = model.selectedDatum;
            //SeriesDatum s = selectedDatum[model.selectedSeries[0].seriesIndex];

            print (model.selectedSeries[0].id);
            selected = model.selectedSeries[0].seriesIndex;
            print (selected);


            //count += 10;
            setState(() {

            });
          },
        ),
      ],
      // Configure a stroke width to enable borders on the bars.
      defaultRenderer: new charts.BarRendererConfig(
          groupingType: charts.BarGroupingType.stacked
      ),
    );
  }

  /// Create series list with multiple series
  List<charts.Series<OrdinalSales, String>> _createSampleData(i1) {
    final desktopSalesData = [
      new OrdinalSales('2014', i1),
    ];

    final tableSalesData = [
      new OrdinalSales('2014', 25),
    ];

    final mobileSalesData = [
      new OrdinalSales('2014', 10),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Desktop',
        domainFn: (OrdinalSales sales, _) => sales.year, // X
        measureFn: (OrdinalSales sales, _) => sales.sales, // Y
        data: desktopSalesData,
        colorFn: (_, __) => charts.MaterialPalette.white,
        fillColorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault.lighter,
        strokeWidthPxFn: (OrdinalSales sales, _) => selected == 0 ? 5 : 0,
      ),
      new charts.Series<OrdinalSales, String>(
        id: 'Tablet',
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: tableSalesData,
        fillColorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        colorFn: (_, __) => charts.MaterialPalette.white,
        domainFn: (OrdinalSales sales, _) => sales.year,
        strokeWidthPxFn: (OrdinalSales sales, _) => selected == 1 ? 5 : 0,
      ),
      new charts.Series<OrdinalSales, String>(
        id: 'Mobile',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: mobileSalesData,
        colorFn: (_, __) => charts.MaterialPalette.white,
        fillColorFn: (_, __) => charts.MaterialPalette.black,
        strokeWidthPxFn: (OrdinalSales sales, _) => selected == 2 ? 5 : 0,
      ),
    ];
  }
}

/// Sample ordinal data type.
class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

范围条形图多区域颜色 Flutter

Range bar chart multiple zone colors Flutter

charts

mpandroidchart

flutter

flutter-dependencies