chart_flutter - 如何在具有多個堆棧的條形圖中支持非零 Y 軸值？

Question

我一直在嘗試使用谷歌團隊在flutter中准備的 charts_flutter。 我試圖使用堆積條形圖，我正在關注這個堆積條形圖演示。 但是，我想要根據我的要求進行調整。 但是，我不知道該怎么做？

以下是我的代碼。

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

Output：

圖表工作正常。 但是，我希望 Y 軸是動態的且非零的。 例如，在我的例子中，圖表數據的最小值是 25。所以，我的 y 軸值應該是 25-35，而不是從 0-35 開始。

我不希望零作為 Y 軸值的起點。 但是，我無法添加非數字值或高於零的值。

另外，如果我也可以將字符串值添加到我的 Y 軸，那最好嗎？

我已經徹底遵循了文檔。 但是，什么都找不到。

任何幫助，將不勝感激。

謝謝。

Answer 1

我已閱讀您的問題，並查看了 flutter 圖表文檔，官方 chart_flutter package 似乎不支持您的要求。

由於折線圖中主要支持非零 Y 軸類型的功能，但條形圖中不支持。

此外，還有一個不太出名的 package flutter_charts 。 但是，它將解決您的用例。

此 package 支持非零 y 軸以及非數字 y 軸值的功能。

或者，您也可以使用 Stack 和 FractionallySizedBox 創建自己的條形圖，以滿足您的堆疊條形圖要求。

Answer 2

當您使用 select 第三個選項時，您會看到一個指令列表：

按照這些說明，命令應該 output 和output.zip文件，您可以上傳。 不知道說明有什么令人困惑的地方:)