HighchartsのイメージをxAxisラベルとして使用

Question

極座標（風のバラ）で縦棒グラフを作成する必要があります。通常のxAxisラベルの代わりにイメージを使用したいと思います。

イメージを正しく中央に配置できますか？あなたは、画像の幅と高さを設定する必要が

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() { \t \t \t \t 
 
       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}] 
 
    }] 
 
});

<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>

Answer 1

。

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

またあなたが合わせる調整することができます。

align: 'center' 

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