Flutter中基于SFCartesian的横向条形图自定义配置问题

完整修改后代码 #

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

class Chart extends StatefulWidget {
  @override
  _ChartState createState() => _ChartState();
}

class _ChartState extends State<Chart> {
  late List<Data> _chartData;
  @override
  void initState(){
    _chartData = getChartData();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfCartesianChart(
        series: <ChartSeries>[
          BarSeries<Data, String> (
            dataSource: _chartData,
            xValueMapper: (Data exp, _) => exp.abc,
            yValueMapper: (Data exp, _) => exp.xyz,
            // 单条颜色映射
            pointColorMapper: (Data exp, _) => exp.barColor,
            borderRadius: const BorderRadius.horizontal(right: Radius.circular(10.0)),
            width: 0.2,
          ),
        ],
        primaryXAxis: CategoryAxis(),
        // 自定义数值轴刻度（横向条形图数值对应y轴，即你所说的横向x轴）
        primaryYAxis: NumericAxis(
          minimum: 0,
          maximum: 600,
          interval: 150,
        ),
        title: ChartTitle(
          text: 'Example',
        ),
      ),
    );
  }
  List <Data> getChartData(){
    final List<Data> chartData = [
      Data('A', 580, Colors.pink),
      Data('B', 350, Colors.blue),
      Data('C', 250, Colors.amber),
    ];
    return chartData;
  }
}

class Data{
  Data(this.abc, this.xyz, this.barColor);
  final String abc;
  final double xyz;
  // 新增条形颜色字段
  final Color barColor;
}

修改点说明 #

• 自定义刻度：设置primaryYAxis的最小值为0、最大值为600、间隔为150，即可生成你需要的0、150、300、450、600固定刻度。
• 单条颜色自定义：给Data类新增颜色属性，配置BarSeries的pointColorMapper参数，就能把自定义颜色映射到对应条形，无需额外依赖。

内容的提问来源于stack exchange，提问作者yamini r