自定義Highcharts xaxis標籤

Question

我可以用Highcharts創建一個這樣的圖表嗎？ Expect result

其實我自己也和Highcharts做了一些類似的事情，但是當我自定義Highcharts xaxis標籤時，我遇到了一個問題，任何人都可以幫我做那個部分？

$(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/