Question

我想与折线图一起创建折线图。谁知道我可以使用哪个图书馆？在Charts_flutter中找不到它。

谢谢。

Answer 1

这似乎是可同时处理两种图形的最高额定抖动软件包。不过请谨慎对待Stack Overflow中的此类问题，因为它被视为观点问题。

flutter_charts：https://pub.dev/packages/flutter_charts

Answer 2

使用有序条形线组合图，我可以实现所需的功能。

https://google.github.io/charts/flutter/example/combo_charts/ordinal_bar_line.html

接下来，将分组类型更改为“ charts.BarGroupingType.groupedStacked”，使用将条形图更改为堆积条形图的groupedStacked选项。

条形图和折线图有2个垂直轴，默认情况下，条形图中只有主轴。您将需要指定辅助轴，否则stackedbar和折线图的图表显示将消失。

声明->静态常量secondaryMeasureAxisId ='secondaryMeasureAxisId';

并在您的线图中添加“ ..setAttribute（charts.measureAxisIdKey，'secondaryMeasureAxisId'）”。

最后，如果您有很多数据，那么像我一样多于30个。水平轴（域轴）下的文本将重叠。我找不到减少它的捷径。到目前为止，我使用的方法是声明一个新的域轴。

正在构建：

final staticTicks = <charts.TickSpec<String>>[];

if(xxx){
   staticTicks.add(xxx);
}

domainAxis: new charts.OrdinalAxisSpec(
          tickProviderSpec:
          new charts.StaticOrdinalTickProviderSpec(staticTicks)),

Answer 3

我按照OrdinalComboBarLineChart的建议从speedlight那里获取了代码，并用charts.BarGroupingType.stacked替换了代码。

我的情况下，我不需要指定辅助轴。

/// Example of an ordinal combo chart with two series rendered as stacked bars, and a
/// third rendered as a line.

class OrdinalComboBarLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  OrdinalComboBarLineChart(this.seriesList, {this.animate});

  factory OrdinalComboBarLineChart.withSampleData() {
    return new OrdinalComboBarLineChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new charts.OrdinalComboChart(seriesList,
        animate: animate,
        // Configure the default renderer as a bar renderer.
        defaultRenderer: new charts.BarRendererConfig(
            groupingType: charts.BarGroupingType.stacked),
        // Custom renderer configuration for the line series. This will be used for
        // any series that does not define a rendererIdKey.
        customSeriesRenderers: [
          new charts.LineRendererConfig(
            // ID used to link series to this renderer.
              customRendererId: 'customLine')
        ]);
  }

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

    final tableSalesData = [
      new OrdinalSales('2014', 5),
      new OrdinalSales('2015', 25),
      new OrdinalSales('2016', 100),
      new OrdinalSales('2017', 75),
    ];

    final mobileSalesData = [
      new OrdinalSales('2014', 10),
      new OrdinalSales('2015', 50),
      new OrdinalSales('2016', 200),
      new OrdinalSales('2017', 150),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
          id: 'Desktop',
          colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
          domainFn: (OrdinalSales sales, _) => sales.year,
          measureFn: (OrdinalSales sales, _) => sales.sales,
          data: desktopSalesData),
      new charts.Series<OrdinalSales, String>(
          id: 'Tablet',
          colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
          domainFn: (OrdinalSales sales, _) => sales.year,
          measureFn: (OrdinalSales sales, _) => sales.sales,
          data: tableSalesData),
      new charts.Series<OrdinalSales, String>(
          id: 'Mobile ',
          colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
          domainFn: (OrdinalSales sales, _) => sales.year,
          measureFn: (OrdinalSales sales, _) => sales.sales,
          data: mobileSalesData)
      // Configure our custom line renderer for this series.
        ..setAttribute(charts.rendererIdKey, 'customLine'),
    ];
  }
}

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

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

然后，我创建了一个Flutter应用程序，并将OrdinalComboBarLineChart.withSampleData()放置为扩展小部件的子级。效果很好。

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class HomePage extends StatefulWidget {
  static const String id ='/StackedBarLineExample';
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String myMessageText = '';

  @override
  Widget build(BuildContext context) {
    //print ('logged in screen built');
    return MaterialApp(
      home: DefaultTabController(
        length: 1,
        initialIndex: int.parse(myLastSelectedPhase),
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            bottom: TabBar(
              indicatorColor: Colors.white,
              tabs: [
                Tab(
                    icon: Icon(FontAwesomeIcons.chartBar)
                ),
              ],
            ),
            title: Text('My Graph examples'),
          ),
          body:
          TabBarView(
              children: [
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Container(
                    child: Center(
                      child: Column(
                        children: <Widget>[
                          Text(
                            'Stacked bar with line', style: TextStyle(
                              fontSize: 24.0, fontWeight: FontWeight.bold),),
                          Expanded(
                              child: OrdinalComboBarLineChart.withSampleData())
                        ],
                      ),
                    ),
                  ),
                ),
              ]
          ),
        ),
      ),
    );
  }
}

这是结果！

Graph image

Flutter哪个库在同一图中提供堆叠的条形图和折线图？

3 个答案: