如何在Flutter堆叠柱状图的X轴索引位置添加图片？

我用syncfusion_flutter_charts包实现了堆叠柱状图，现在想在X轴的索引位置添加图片，不知道怎么实现，以下是我的相关代码：

CustomChart.dart #

import 'package:climate_karma/utils/values/constant_colors.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

import '../model/chartData.dart';

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

  @override
  State<CustomChart> createState() => _CustomChartState();
}

class _CustomChartState extends State<CustomChart> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:  Container(
          height: 150,
                child: Row(
                  children: [
                    Container(
                      width: 48,
                      color: Colors.white,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            margin: EdgeInsets.only(top: 25),
                            child: Icon(Icons.electric_car,size: 30),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 25),
                            child: Icon(Icons.electric_car,size: 30,),
                          )
                        ],
                      ),
                    ),
                    Flexible(
                      child: SfCartesianChart(
                          primaryXAxis: CategoryAxis(
                           isVisible: false,
                            
                            interval: 1,
                          ),
                          primaryYAxis: NumericAxis(interval: 1,maximum: 6),
                         backgroundColor: Colors.white,
                          series: <ChartSeries>[
                            StackedBarSeries<ChartData, String>(
                                dataSource: ChartData.chartDataList,
                                color: ConstantColors.greenVoilrtColor,
                                xValueMapper: (ChartData data, _) => data.name,
                                yValueMapper: (ChartData data, _) => data.index
                            ),
                            StackedBarSeries<ChartData, String>(
                                dataSource: ChartData.chartDataList,
                                color: ConstantColors.orengeColor,
                                xValueMapper: (ChartData data, _) => data.name,
                                yValueMapper: (ChartData data, _) =>data.index,
                            ),
                            StackedBarSeries<ChartData, String>(
                                dataSource: ChartData.chartDataList,
                                color: ConstantColors.yellowColor,
                                xValueMapper: (ChartData data, _) => data.name,
                                yValueMapper: (ChartData data, _) => data.index
                            ),
                            StackedBarSeries<ChartData, String>(
                                dataSource: ChartData.chartDataList,
                                color: ConstantColors.zestColor,
                                xValueMapper: (ChartData data, _) => data.name,
                                yValueMapper: (ChartData data, _) => data.index
                            ),
                            StackedBarSeries<ChartData, String>(
                                dataSource: ChartData.chartDataList,
                                color: ConstantColors.bianchiGreenColor,
                                xValueMapper: (ChartData data, _) => data.name,
                                yValueMapper: (ChartData data, _) => data.index
                            )
                          ]
                      ),
                    ),

                  ],
                )
            )

    );
  }
}

ChartData.dart #

import 'dart:ui';

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';

class ChartData{
  String name;
  String image;
  Widget material;

  num index;
  ChartData({required this.index,required this.name, required this.image,required this.material});

 static List<ChartData> chartDataList = [
   ChartData(index: 0,name: "elec", image: "assets/images/icon_power.svg",material: SvgPicture.asset("assets/images/icon_power.svg")) ,
   ChartData(index: 1.3,name: "elec", image: "assets/images/icon_transport.svg",material: SvgPicture.asset("assets/images/icon_power.svg")),
   ChartData(index: 1.3,name: "elec", image: "assets/images/icon_power.svg",material: SvgPicture.asset("assets/images/icon_power.svg")),
   ChartData(index: 1.5,name: "elec", image: "assets/images/icon_power.svg",material: SvgPicture.asset("assets/images/icon_power.svg")),
   ChartData(index: 1.6,name: "elec", image: "assets/images/icon_power.svg",material: SvgPicture.asset("assets/images/icon_power.svg")),
   ChartData(index: 4,name: "fuel", image: "assets/images/icon_power.svg",material: SvgPicture.asset("assets/images/icon_power.svg")),
   ChartData(index: 5,name: "fuel", image: "assets/images/icon_transport.svg",material: SvgPicture.asset("assets/images/icon_power.svg")),

  ];

}

解决方案 #

要在X轴索引位置添加图片，有两种实用方式，你可以根据需求选择：

方式一：自定义X轴标签

通过axisLabelFormatter替换默认标签为图片，步骤如下：

1. 在_CustomChartState中添加标签格式化方法：

ChartAxisLabel? _axisLabelFormatter(AxisLabelRenderDetails details) {
  // 根据X轴的分类名称匹配对应图片
  final targetData = ChartData.chartDataList.firstWhere(
    (data) => data.name == details.text,
    orElse: () => ChartData.chartDataList[0]
  );
  return ChartAxisLabel(
    "", // 隐藏默认文本
    const TextStyle(fontSize: 0), // 取消文本显示
    widget: Container(
      width: 30,
      height: 30,
      child: targetData.material,
    ),
  );
}

2. 修改primaryXAxis配置，启用自定义标签：

primaryXAxis: CategoryAxis(
  isVisible: true,
  interval: 1,
  axisLabelFormatter: _axisLabelFormatter,
  labelStyle: const TextStyle(fontSize: 0), // 隐藏原生文本标签
),

方式二：使用图表注解

如果希望图片出现在X轴下方（而非标签位置），可以用annotations配置：

SfCartesianChart(
  // ...其他原有配置
  annotations: <CartesianChartAnnotation>[
    CartesianChartAnnotation(
      widget: SvgPicture.asset("assets/images/icon_power.svg", width:30, height:30),
      coordinateUnit: CoordinateUnit.point,
      x: "elec", // 对应X轴分类值
      y: -0.5, // Y轴负数值，将图片放在图表下方
    ),
    CartesianChartAnnotation(
      widget: SvgPicture.asset("assets/images/icon_transport.svg", width:30, height:30),
      coordinateUnit: CoordinateUnit.point,
      x: "fuel",
      y: -0.5,
    ),
  ],
)

注意事项：

• 确保ChartData中的material Widget路径正确，比如SvgPicture的资源路径无误
• 可调整图片大小、y轴参数，让图片位置符合视觉需求
• 如果X轴是数值型，需将x参数改为对应数值而非分类字符串

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