Flutter中SfCartesianChart图例横向置顶及图标修改咨询

要实现图例横向显示在图表顶部、并将图例图标替换为对应颜色填充方块的效果，只需修改SfCartesianChart中Legend的配置参数即可，具体如下：

关键配置说明 #

• 横向顶部布局：通过orientation: LegendOrientation.horizontal设置图例横向排列，position: LegendPosition.top将图例固定在图表顶部
• 填充方块图标：通过iconType: LegendIconType.rectangle把默认的圆形图标替换为填充矩形方块

修改后的完整代码 #

class _StackedBarState extends State<StackedBar> {
  late List<ExpenseData> _chartData;
  late TooltipBehavior _tooltipBehavior;

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

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      title: ChartTitle(text: "Chart Title"),
      // 修改后的Legend配置
      legend: Legend(
        isVisible: true,
        orientation: LegendOrientation.horizontal,
        position: LegendPosition.top,
        iconType: LegendIconType.rectangle,
      ),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries>[
        StackedBarSeries<ExpenseData, String>(
            dataSource: _chartData,
            xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
            yValueMapper: (ExpenseData exp, _) => exp.father,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: 'father',color: Colors.green,width: 0.4 ,
        markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.mother,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: "Mother",color: Colors.yellowAccent,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.son,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: "son",color: Colors.red,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.daughter,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: 'daughter',color: Colors.orange,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),

      ],
      primaryXAxis: CategoryAxis(),
    );
  }

  List<ExpenseData> getChartData() {
    final List<ExpenseData> charData = [
      ExpenseData('others', 55, 30, 65, 80),
      ExpenseData('gaurav shankar', 25, 40, 56, 75),
      ExpenseData('bal kishor', 15, 50, 36, 89),
      ExpenseData('shashi singh', 45, 60, 56, 89),
      ExpenseData('santosh kumar', 30, 10, 60, 90),
    ];
    return charData;
  }
}

class ExpenseData {
  ExpenseData(
    this.expenseCategory,
    this.father,
    this.mother,
    this.son,
    this.daughter,
  );

  final String expenseCategory;
  final num father;
  final num mother;
  final num son;
  final num daughter;
}

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