如何在SVGGraph的RadarGraph轴文本中设置图片？

问题根源 #

你用的axis_text_callback_x是针对数值型X轴的回调，但RadarGraph的分类标签属于独立的标签系统，不是X轴文本。而且你设置了show_labels => false，直接关闭了标签渲染，自然看不到图片。

修正方案 #

1. 开启标签显示：将show_labels设为true
2. 替换回调：用label_callback替代axis_text_callback_x，这个回调专门处理RadarGraph的分类标签
3. 补充图片尺寸：返回数组时加上width和height参数，避免图片因尺寸未定义而不显示

修改后的完整代码 #

$settings = [
    'auto_fit' => true,
    'back_colour' => 'none',
    'back_stroke_width' => 0,
    'back_stroke_colour' => '#eee',
    'stroke_colour' => '#000',
    'axis_colour' => '#333',
    'axis_overlap' => 2,
    'grid_colour' => '#666',
    'axis_font' => 'Arial',
    'axis_font_size' => 10,
    'pad_right' => 20,
    'pad_left' => 20,
    'marker_type' => 'circle',
    'marker_size' => 3,
    'marker_colour' => 'blue',
    'fill_under' => true,
    'show_labels' => true, // 关键：开启标签显示
    'label_font' => 'Arial',
    'label_font_size' => 14,
    'minimum_grid_spacing' => 20,
    'show_subdivisions' => true,
    'show_grid_subdivisions' => true,
    'grid_subdivision_colour' => '#ccc',
    'grid_straight' => true,
    'show_x_axis' => false,
    'reverse' => true,
    // 关键：用label_callback替换axis_text_callback_x
    'label_callback' => function ($label, $index, $value) {
        return [
            'image',
            'src' => 'https://imagelink.png',
            'width' => 20, // 自定义图片宽度
            'height' => 20 // 自定义图片高度
        ];
    },
];

$width = 300;
$height = 200;
$type = 'RadarGraph';

$colours = ['#FFC0CB'];

$graph = new Goat1000\SVGGraph\SVGGraph($width, $height, $settings);
$graph->colours($colours);

$graph->values(['Group 1' => 12, 'Group 2' => 14, 'Group 3' => 14]);

echo $graph->fetch($type, false);

额外说明 #

如果需要给不同分类标签设置不同图片，可以利用回调的$label或$index参数做分支判断：

'label_callback' => function ($label, $index) {
    $imageMap = [
        'Group 1' => 'https://image1.png',
        'Group 2' => 'https://image2.png',
        'Group 3' => 'https://image3.png'
    ];
    return [
        'image',
        'src' => $imageMap[$label],
        'width' => 20,
        'height' => 20
    ];
},

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