Flutter：如何设置带有滚动x轴的条形图列的固定宽度答案

【问题标题】：Flutter : How to set fix width of Bar chart Column with scrolling x axisFlutter：如何设置带有滚动x轴的条形图列的固定宽度
【发布时间】：2019-10-15 10:12:01
【问题描述】：

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,
    );
  }
...

【问题讨论】：

您找到解决方案了吗？
或者，一个带有垂直滚动的水平条形字符，很高兴知道。
为什么不使用您想要的列宽来计算父级宽度应该是多少？用SizedBox 包裹图表，用水平SingleChildScrollView 包裹。将SizedBox 的宽度设置为例如。 1.5 * desiredColumnWidth * columnCount。我不知道列之间的确切填充，但它在视觉上似乎大约是列宽的一半。
@Ovidiu，经过测试，它可以工作。随时发布您的赏金答案。
你找到解决办法了吗？？

标签： flutter bar-chart

【解决方案1】：

您可以通过设置初始视口并将SlidingViewport 和PanBehavior 添加到图表来做到这一点：

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(),
      ],
    );
  }

【讨论】：

这段代码告诉我“DateTimeAxisSpec”类型不是“AxisSpec”类型的子类型。 BarChart 构造函数不接受 DateTime 作为值，它只接受 String。你如何解决这个问题？
通过查看此处的示例回答了我自己的问题：google.github.io/charts/flutter/example/axes/…。

【解决方案2】：

为什么不使用您想要的列宽来计算父级宽度应该是多少？用SizedBox 包裹图表，用水平SingleChildScrollView 包裹。将SizedBox 的宽度设置为例如。 1.5 * desiredColumnWidth * columnCount。我不知道列之间的确切填充，但它在视觉上似乎大约是列宽的一半。

【讨论】：