将Highcharts中的图像用作xAxis标签

Question

我需要在极坐标（风玫瑰）中创建柱形图，并且我希望用图像代替通常的xAxis标签。

你能帮助正确居中图像吗？

＆＃13;

＆＃13;

var img_path = 'https://cdn2.iconfinder.com/data/icons/navigation-set-arrows-part-two/32/Arrow_Right_Circle-48.png'


Highcharts.chart('container', {
    chart: {
        polar: true,
        type: 'column'
    },
    
    xAxis:{
        labels: {
            formatter: function() {				
                return '<img src="' + img_path + '" />';
            },
            useHTML: true
        }
    },

    series:[{
        data: [{x:1, y:4}, {x:2, y:7}, {x:3, y:2}, {x:4, y:5}, {x:5, y:8}]
    }]
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要设置图像的宽度和高度。

 formatter: function() {                
   return '<img src="' + img_path + '" style="width: 30px; height: 30px;" />';
 },

您还可以调整对齐方式：

align: 'center'

示例：http://jsfiddle.net/kz8h8uw9/