如何增加Syncfusion Flutter Chart的Column Series中的条形宽度？

Question

我正在尝试自定义 Syncfusion Flutter 图表中柱形图的外观。具体来说，我想增加条形的宽度，但我不知道如何调整它。

这是我目前拥有的代码：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  _MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  late TooltipBehavior _tooltip;

  @override
  void initState() {
    super.initState();
    _tooltip = TooltipBehavior(enable: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter Chart with Gradient Colors'),
      ),
      body: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        primaryYAxis: NumericAxis(minimum: 0, maximum: 20, interval: 3),
        margin: EdgeInsets.zero,
        tooltipBehavior: _tooltip,
        series: _buildColumnSeries(),
      ),
    );
  }

  List<ColumnSeries<_ChartData, String>> _buildColumnSeries() {
    final data = [
      _ChartData('Jan', 8, [Color(0xFFFF0000), Color(0x17C1884F)]),
      _ChartData('Feb', 14, [Color(0xFF0000FF), Color(0xD00B5E2)]),
      _ChartData('Mar', 10, [Color(0xFF008000), Color(0x1890EE90)]),
      _ChartData('Apr', 13, [Color(0xFF800080), Color(0x12FFC0CB)]),
      _ChartData('May', 2, [Color(0xFF008080), Color(0x2400FFFF)]),
    ];

    return data.map((entry) {
      return ColumnSeries<_ChartData, String>(
        dataSource: [entry],
        xValueMapper: (_ChartData data, _) => data.x,
        yValueMapper: (_ChartData data, _) => data.y,
        width: 1, // Here I set the width of the bars
        spacing: 0.0,
        gradient: LinearGradient(
          colors: entry.colors,
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
        borderRadius: BorderRadius.circular(12),
      );
    }).toList();
  }
}

class _ChartData {
  final String x;
  final double y;
  final List<Color> colors;

  _ChartData(this.x, this.y, this.colors);
}

在上面的代码中，我使用

ColumnSeries

作为图表，并将

width

属性设置为

1

。但是，我想增加条形的宽度。

我尝试过的：

• 我尝试将

  width

  属性更改为更高的值，但条形的宽度似乎没有增加。

• 我也尝试过调整

  spacing

  和其他属性，但这似乎也不能解决问题。

我想显示这种类型，但该列的颜色不同。

问题：使用Syncfusion Flutter图表库时，如何正确增加此

ColumnSeries

中的条形宽度？

Answer 1

问题在于您正在为数据集的每个条目创建一个图表。

为整个数据集创建一个 ColumnSeries。