ハイチャートのカスタマイズxaxisラベル

Question

ハイチャートでこのようなグラフを作成できますか？ Expect result

実際に私は自分でHighchartsでいくつかの同じようなことをしましたが、私はHighcharts x軸ラベルをカスタマイズするとき、私は問題を抱えて、いずれかは、その部分に私を助けることができますか？

$(function() { 
 
    Highcharts.chart('container', { 
 
     chart: { 
 
      type: 'bar' 
 
     }, 
 
     title: { 
 
      text: null 
 
     }, 
 
     xAxis: { 
 
      categories: ['VISIONLINK', 'PRODUCT LINK WEB', 'CAT DAILY', 'NOT CONNECTED'], 
 
      title: { 
 
       text: null 
 
      }, 
 
    \t \t \t \t \t lineColor: 'transparent', 
 
      minorTickLength: 0, 
 
    \t \t \t \t \t tickLength: 0, 
 
     \t \t labels: { 
 
      useHTML: true, 
 
      formatter: function() { 
 
       return '<strong class="hc-label">' + this.value + '</strong>'; 
 
      } 
 
     } 
 
     }, 
 
     yAxis: { 
 
      min: 0, 
 
      title: { 
 
       text: null, 
 
       align: 'high' 
 
      }, 
 
      labels: { 
 
       enabled: false, 
 
      }, 
 

 
      minorTickLength: 0, 
 
    \t \t \t \t \t tickLength: 0, 
 
      gridLineColor: 'transparent', 
 
      
 
      
 
     }, 
 
     tooltip: { 
 
      enabled: false 
 
     }, 
 
     plotOptions: { 
 
      bar: { 
 
       dataLabels: { 
 
        enabled: true, 
 
        align: 'right', 
 
        color:'black', 
 
        x: 30 
 
       } 
 
      }, 
 
      series: { 
 
       stacking: 'normal', 
 
       \t pointWidth: 50, 
 
       pointPadding: 0, 
 

 
      } 
 
     }, 
 
     legend: { 
 
      enabled:false 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     series: [{ 
 
      
 
      name: 'VISIONLINK', 
 
      data: [20,null,null,null] 
 
     }, { 
 
      
 
      name: 'PRODUCT LINK WEB', 
 
      data: [null,40,null,null] 
 
     }, { 
 
      
 
      name: 'CAT DAILY', 
 
      data: [null,null,200,null] 
 
     }, 
 
     { 
 
      name: 'NOT CONNECTED', 
 
      data: [null,null,null,40] 
 
     }] 
 
    }); 
 
});

.hc-label { 
 
    background-color: #efefef; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

それが達成可能であるが、私は第二シリーズとラベルをあざけることは、直接軸ラベルをカスタマイズするよりも簡単かもしれないと思い、私のDEMO

Answer 1

を参照してください。次のようにラベルを模倣シリーズの

の設定は次のとおりです。

, { 
    color: '#efefef', 
    enableMouseTracking: false, 
    showInLegend: false, 
    data: [ 
    ['VISIONLINK', 50], 
    ['PRODUCT LINK WEB', 50], 
    ['CAT DAILY', 50], 
    ['NOT CONNECTED', 50] 
    ], 
    dataLabels: { 
    format: '{key}' 
    } 
} 

例：http://jsfiddle.net/g3asmfj7/3/