如何在 Flutter 水平条形图上设置最大高度?

use*_*961 10 dart flutter flutter-layout

我正在使用水平条形图来自动调整条形高度。

https://google.github.io/charts/flutter/example/bar_charts/horizo​​ntal_bar_label.html

在此处输入图片说明

当我在这个例子中只有一个栏时,我想为栏固定一个最大高度(例如 10px)。这是怎么配置的?

我在这里查看构造函数,但我还没有找到解决方案 https://pub.dev/documentation/charts_flutter/latest/flutter/BarChart-class.html

      child: SizedBox(
        width: 300.0,
        height: 250.0,
        child: charts.BarChart(
          [
            charts.Series<OrdinalSales, String>(
                id: 'Sales',
                domainFn: (OrdinalSales sales, _) => sales.year,
                measureFn: (OrdinalSales sales, _) => sales.sales,
                data: localData,
                colorFn: (_, __) =>
                    charts.MaterialPalette.green.shadeDefault,
                labelAccessorFn: (OrdinalSales sales, _) =>
                    'Category 1: ${sales.sales.toString()}')
          ],
          animate: true,
          vertical: false,
          barRendererDecorator: new charts.BarLabelDecorator<String>(labelPosition: charts.BarLabelPosition.inside
          ),
          domainAxis:
          new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
        ),
      ),
Run Code Online (Sandbox Code Playgroud)

Le *_*aul 5

根据此问题,暂时无法执行此操作。

但我认为您可以通过创建具有透明颜色的其他项目或更改图表库代码来绕过这一点。

编辑 2021/03/23

谷歌团队仍然没有解决方案,但Boken 的解决方案似乎是一个很好的解决方案


Bok*_*ken 5

解决方法

你可以尝试用BarChartto 包裹起来SizedBox,用 包裹起来SingleChildScrollView

在伪代码中

- SingleChildScrollView
       - SizedBox
              - charts.BarChart
Run Code Online (Sandbox Code Playgroud)

SingleChildScrollView(
  child: SizedBox(
    height: 2000,
    child: HorizontalBarLabelChart(
      getData(),
    ),
  ),
),
Run Code Online (Sandbox Code Playgroud)

尺寸计算

SizedBox可以根据数据数量计算高度,例如:

numerOfElements * 50
Run Code Online (Sandbox Code Playgroud)

对于 100 个元素

在此输入图像描述

对于 100 个元素(所以高度是5000因为100 * 50

在此输入图像描述


小智 4

尝试这样做——

ConstrainedBox(
  constraints: BoxConstraints.expand(height: 50.0), // adjust the height here
  child: Your_chart_here, // place your chart here
),
Run Code Online (Sandbox Code Playgroud)

  • 感谢您的代码。然而,这限制了整个图表,但不限制其中包含的条形。它对于带有单个条形图的图表工作正常,但我们的图表在 1-5 个条形图之间变化,因此如果仅限于单个条形图设置,则带有 5 个条形图的图表将不起作用。 (4认同)