时间戳

首页 > 解决方案 > 如何在charts_flutter中更改条形图中条形的宽度？

flutter - 如何在charts_flutter中更改条形图中条形的宽度？

问题描述

尝试charts_flutter用于条形图，但找不到在简单条形图中减小条形宽度的属性。

以下是我的模拟： 图表

另外，不知道如何：

- 在此包中添加以下索引

- 在条内添加值，如模拟中所示。

以下是我的代码：

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

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

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


  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,

      /// Assign a custom style for the measure axis.
      ///
      /// The NoneRenderSpec can still draw an axis line with
      /// showAxisLine=true.
      primaryMeasureAxis:
          new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()),

      /// This is an OrdinalAxisSpec to match up with BarChart's default
      /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
      /// other charts).
      domainAxis: new charts.OrdinalAxisSpec(
          // Make sure that we draw the domain axis line.
          showAxisLine: true,
          // But don't draw anything else.
          renderSpec: new charts.NoneRenderSpec()),
    );
  }

  /// Create series list with single series
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final globalSalesData = [
      new OrdinalSales('2014', 3, Colors.lightGreen),
      new OrdinalSales('2015', 6,Colors.lightBlue),
      new OrdinalSales('2016', 0.5,Colors.red),
      // new OrdinalSales('2017', 750000),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Global Revenue',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        colorFn: (OrdinalSales sales, _) => sales.color,

        data: globalSalesData,
      ),
    ];
  }
}

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

  final charts.Color color;

  OrdinalSales(this.year, this.sales, Color color)
      : this.color = new charts.Color(
            r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

我是新手，如有问题请多多包涵。

标签： flutterchartsflutter-layout

解决方案

您可以使用maxBarWidthPxinside ofnew charts.BarRendererConfig设置条的最大宽度。

例子：

var chart = charts.BarChart(
   series,
   animate: true,
   vertical: true,
   defaultRenderer: new charts.BarRendererConfig(
     maxBarWidthPx: 40,
   ),
),
...

推荐阅读