Flutter:如何通过滚动x轴设置条形图列的固定宽度

问题描述 投票:4回答:2

flutter_charts:^ 0.1.10

https://pub.dev/packages/charts_flutter

https://pub.dev/documentation/charts_flutter/latest/flutter/BarChart-class.html

我要设置条形图的固定宽度,并且需要滚动水平x轴。这样可以吗?

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

final data = [
      new OrdinalSales('2014', random.nextInt(100)),
      new OrdinalSales('2015', random.nextInt(100)),
      new OrdinalSales('2016', random.nextInt(100)),
      new OrdinalSales('2017', random.nextInt(100)),
      new OrdinalSales('2018', random.nextInt(100)),
      new OrdinalSales('2019', random.nextInt(100)),
      new OrdinalSales('2020', random.nextInt(100)),
      new OrdinalSales('2021', random.nextInt(100)),
      new OrdinalSales('2022', random.nextInt(100)),
      new OrdinalSales('2023', random.nextInt(100)),
    ];
...
@override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,
    );
  }
...

enter image description here

flutter bar-chart
2个回答
0
投票

为什么不使用所需的列宽来计算父级宽度?用SizedBox包裹图表,并用水平SingleChildScrollView包裹。将SizedBox的宽度设置为例如。 1.5 * desiredColumnWidth * columnCount。我不知道各列之间的确切填充,但是从视觉上看,它大约是列宽的一半。


0
投票

您可以通过设置初始视口并将SlidingViewportPanBehavior添加到图表中来执行此操作:

Widget build(BuildContext context) {

    final barsToDisplay = 3;

    return new charts.BarChart(
      seriesList,
      animate: animate,
      domainAxis: charts.DateTimeAxisSpec(
        viewport: charts.DateTimeExtents(
          start: DateTime(data.first.year),
          end: DateTime(data[barsToDisplay - 1].year),
        ),
      ),
      behaviors: [
        // Adding this behavior will allow tapping a bar to center it in the viewport
        charts.SlidingViewport(
          charts.SelectionModelType.action,
        ),
        charts.PanBehavior(),
      ],
    );
  }
© www.soinside.com 2019 - 2024. All rights reserved.