charts_flutter - 如何在具有多个堆栈的条形图中支持非零 Y 轴值？

Question

我一直在尝试使用 charts_flutter prepared by google team in flutter. I was trying to use stacked bar charts and I was following this Stacked Bar Charts Demo。但是，我想要对我的要求进行一些调整。但是，我不知道该怎么做？

以下是我的代码。

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

class WeighAbleStatsScreenV3 extends StatefulWidget {
  @override
  _WeighAbleStatsScreenV3State createState() => _WeighAbleStatsScreenV3State();
}

class _WeighAbleStatsScreenV3State extends State<WeighAbleStatsScreenV3> {
  List<charts.Series> seriesList;

  /// Create series list with multiple series
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final desktopSalesData = [
      OrdinalSales('2014', 25),
      OrdinalSales('2015', 28),
      OrdinalSales('2016', 26),
      OrdinalSales('2017', 30),
    ];

    final tableSalesData = [
      OrdinalSales('2014', 3),
      OrdinalSales('2015', 3),
      OrdinalSales('2016', 2),
      OrdinalSales('2017', 2),
    ];

    final mobileSalesData = [
      OrdinalSales('2014', 5),
      OrdinalSales('2015', 4),
      OrdinalSales('2016', 4),
      OrdinalSales('2017', 2),
    ];

    return [
      charts.Series<OrdinalSales, String>(
        id: 'Desktop',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: desktopSalesData,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Tablet',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: tableSalesData,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Mobile',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: mobileSalesData,
      ),
    ];
  }

  @override
  void initState() {
    super.initState();

    seriesList = _createSampleData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: 500,
          child: charts.BarChart(
            seriesList,
            animate: true,
            barGroupingType: charts.BarGroupingType.stacked,
          ),
        ),
      ),
    );
  }
}

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

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

输出：

图表工作正常。但是，我希望 Y 轴是动态的且非零的。例如，我的图表数据的最小值为 25。因此，我的 y 轴值应为 25-35，而不是从 0-35 开始。

我不想将零作为我的 Y 轴值的起点。但是，我无法添加非数字值或大于零的值。

此外，如果我也可以将字符串值添加到我的 Y 轴，那最好吗？

我已经仔细阅读了文档。但是，找不到任何东西。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

当您select第三个选项时，您会看到一个说明列表：

按照这些说明操作，该命令应输出一个 output.zip 文件，您可以上传该文件。不确定这些说明有什么令人困惑的地方:)

Answer 2

我已阅读您的问题并查看了 flutter 图表文档，官方 chart_flutter 软件包似乎不支持您的要求。

由于非零Y轴类的特征主要在折线图中支持，在条形图中不支持。

另外还有一个包flutter_charts不是太出名。但是，它将解决您的用例。

此包支持非零 y 轴以及非数字 y 轴值的功能。

或者，您也可以使用 Stack 和 FractionallySizedBox 创建自己的条形图以满足您的堆叠条形图要求。

charts_flutter - 如何在具有多个堆栈的条形图中支持非零 Y 轴值？

charts_flutter - How to support non-zero Y-Axis values in bar chart with multiple stacks?

android

bar-chart

dart

flutter

flutter-dependencies