Question

尝试对条形图使用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);
}

我是个新手，如果有任何问题，请原谅。

Answer 1

尚无设置条形宽度的功能。问题未解决，请参见Here。

您可以将条形宽度最小化barGroupingType: charts.BarGroupingType.grouped，并在fillColorFn: (Mileage mileage, _) => charts.ColorUtil.fromDartColor(Colors.transparent)内部将charts.Series设置为不带中间的。

我在下面分享我的代码：

输出：

代码：

custom_rounded_bars.dart文件，

import 'package:flutter/material.dart'; import 'package:charts_flutter/flutter.dart' as charts; import 'package:easytrax/screens/analytics_page.dart'; class CustomRoundedBars extends StatelessWidget { final List<dynamic> data; final bool animate; CustomRoundedBars(this.data, {this.animate}); @override Widget build(BuildContext context) { var seriesList = _createSampleData(data); return new charts.BarChart( seriesList, animate: animate, barGroupingType: charts.BarGroupingType.grouped, defaultRenderer: new charts.BarRendererConfig( cornerStrategy: const charts.ConstCornerStrategy(30)), ); } /// Create one series with sample hard coded data. static List<charts.Series<Mileage, String>> _createSampleData(dynamic data) { return [ new charts.Series<Mileage, String>( id: 'mileage1', colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, domainFn: (Mileage mileage, _) => mileage.day, measureFn: (Mileage mileage, _) => mileage.km, data: data, fillColorFn: (Mileage mileage, _) => charts.ColorUtil.fromDartColor(Colors.transparent), ), new charts.Series<Mileage, String>( id: 'mileage', colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, domainFn: (Mileage mileage, _) => mileage.day, measureFn: (Mileage mileage, _) => mileage.km, data: data, ), new charts.Series<Mileage, String>( id: 'mileage2', colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, domainFn: (Mileage mileage, _) => mileage.day, measureFn: (Mileage mileage, _) => mileage.km, data: data, fillColorFn: (Mileage mileage, _) => charts.ColorUtil.fromDartColor(Colors.transparent), ), ]; } }

analytics_page.dart文件，

import 'package:easytrax/Common/custom_rounded_bars.dart'; import 'package:flutter/material.dart'; class AnalyticsPage extends StatefulWidget { static const String page = 'analytics_page'; @override _AnalyticsPageState createState() => _AnalyticsPageState(); } class _AnalyticsPageState extends State<AnalyticsPage> { List<Mileage> _createSampleData(){ final data = [ new Mileage(10, 'April 27'), new Mileage(38, 'April 28'), new Mileage(60, 'April 29'), new Mileage(20, 'April 30'), new Mileage(45, 'May 01'), new Mileage(35, 'May 02'), new Mileage(55, 'May 03'), ]; return data; } @override Widget build(BuildContext context) { var data = _createSampleData(); return Scaffold( body:Container( child: Column( children: [ Container( padding: EdgeInsets.all(16.0), height: 300.0, child: CustomRoundedBars(data), ), ], ), ), ); } } /// data type. class Mileage { final int km; final String day; Mileage(this.km, this.day); }

Answer 2

在条形渲染器内部有一个strokeWidthPx属性

defaultRenderer: new charts.BarRendererConfig(
    strokeWidthPx: 1.0,
)

Answer 3

栏的大小取决于父窗口小部件的大小。在我的情况下，即时通讯使用垂直条形图。大小是实用程序的响应大小：

MediaQuery.of(context).size;

我正在使用它来使其具有响应性，但是如果水平，则可以使用paren的高度或宽度。

Container(
  height: size.height * 0.1 * list.length +
    (size.height * 0.05),
  child: SimpleBarChart(),
),

最后，我将每个列表项的高度都设置为size.height * 0.1（设备的10％高度），还要（重要）我加上父级测量值的一半（size.height * 0.05），因为将是测量轴的高度（在我的情况下（如果水平，则为您的宽度））。

希望您能找到解决方案。编码愉快！

Answer 4

您可以在 maxBarWidthPx 内使用 new charts.BarRendererConfig 来设置条形的最大宽度。

示例：

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

如何更改Charts_flutter中条形图中的条形宽度？

4 个答案: