하이 차트 사용자 정의 xaxis 레이블

Question

하이 차트를 사용하여 차트를 만들 수 있습니까? 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/