하이 열 차트 왼쪽에 직접 레이블을 표시하려고합니다

Question

이 하이 차트 그래프가 있는데 차트를 둘러싼 모든 숫자의 왼쪽에 직접 표시되는 "합계"또는 "백분율"과 같은 레이블을 추가하려고합니다. html 사용을 피하기 위해 highcharts에서 이것을하는 우아한 방법이 있는지 궁금합니다. 그것은 보이지 않거나 뭔가있는 여분의 칼럼과 같은 것입니다. 감사!

new Highcharts.Chart({ 
     "chart":{ 
     "renderTo":setup.renderTo, // dynamic 
     "type":"column", 
     "width": 400, 
     "height": 150 - setup.offset, 
     "backgroundColor":"rgba(255,255,255,0)", 
     borderWidth:0, 
     borderColor:'#fff' 

     }, 
     "title":{ 
     "text":"" 
     }, 
     "legend":{ 
     "enabled":false 
     }, 
     "credits":{ 
     "enabled":false 
     }, 
     xAxis:[{ 
     categories:setup.x_mixed, 
     maxZoom:5, 
     minPadding: 0.2, 
     labels:{ 
      "enabled":setup.categories_label, 
      "y":16, 
      "style":{ 
      "fontSize":13, 
      "color":"#999", 
      fontFamily:"'helvetica neue',helvetica", 
      whiteSpace:"nowrap", 
      textOverflow:"clip", 
      width:"100%", 
      marginTop:legendSpacing 
      }, 
      formatter:function() { 
      return this.value.split("|")[0] 
      } 
     }, 
     lineColor:"rgba(255,255,255,0)", 
     tickWidth:0, 
     offset:0 
     },{ 
     categories:setup.x_mixed, 
     maxZoom:5, 
     minPadding: 0.2, 
     linkedTo: 0, 
     labels:{ 
      "enabled":true, 
      "y":16, 
      "style":{ 
      "fontSize":10, 
      "color":"#999", 
      fontFamily:"'helvetica neue',helvetica", 
      whiteSpace:"nowrap", 
      textOverflow:"clip", 
      width:"100%", 
      marginTop:legendSpacing 
      }, 
      formatter:function() { 
      return this.value.split("|")[1] 
      } 
     }, 
     lineColor:"rgba(255,255,255,0)", 
     tickWidth:0, 
     opposite: setup.categories_label, 
     offset: -13 - setup.offset 
     },{ 
     categories:setup.x_mixed, 
     maxZoom:5, 
     minPadding: 0.2, 
     linkedTo: 0, 
     labels:{ 
      "enabled":true, 
      "y":16, 
      "style":{ 
      "fontSize":10, 
      "color":"#999", 
      fontFamily:"'helvetica neue',helvetica", 
      whiteSpace:"nowrap", 
      textOverflow:"clip", 
      width:"100%", 
      marginTop:legendSpacing 
      }, 
      formatter:function() { 
      return this.value.split("|")[2] 
      } 
     }, 
     lineColor:"rgba(255,255,255,0)", 
     tickWidth:0, 
     opposite: setup.categories_label, 
     offset: - setup.offset 
     }], 
     "yAxis":{ 
     "title":{ 
      "text":false 
     }, 
     "gridLineWidth":0, 
     "labels":{ 
      "enabled":false 
     }, 
     "lineColor":"rgba(255,255,255,0)", 
     "max":setup.max_p, 
     "min":2, 
     reversed:setup.reversed 
     }, 
     "plotOptions":{ 
     "column":{ 
      "color":setup.option_color, 
      "shadow":false, 
      "borderColor":"#fff", 
      "borderWidth":0, 
      groupPadding:0.07, 
      pointPadding:0.01 
     } 
     }, 
     tooltip:{ 
     shared: true, 
     backgroundColor:'rgba(0,0,0,0.8)', 
     style:{ 
      color:'#ffffff' 
     }, 
     borderWidth:0, 
     shadow:false, 
     formatter:function() { 
      if (navigator.userAgent.match(/msie/i)) { 
      var response = setup.who + " " + this.x.split("|")[0] + " Fans : " + StringHelper.numberFormat(parseInt(this.y), 'flatCommas'); 
      return response; 
      } else { 
      var response = setup.who + " " + this.x.split("|")[0] + "<br/>Fans : " + StringHelper.numberFormat(parseInt(this.y), 'flatCommas'); 
      return response; 
      } 
     } 
     }, 
     "series":[ 
     { 
      "name":"series", 
      "data":setup.data 
      // "data": [1232, 4673, 1823, 186, 85, 15, 36] 

     } 
     ] 

    }); 

Answer 1

은 당신이 이것을 달성 할 수있는 방법은 여러 가지가 있습니다.

1 )를 사용하여 레이블 옵션 내장 : http://api.highcharts.com/highcharts#labels

2) y 축에 대한 tickPositions 속성을 사용하고 필요에 따라 라벨을 포맷 : http://api.highcharts.com/highcharts#yAxis.tickPositions

3) 데이터 레이블에 분산 시리즈를 사용 . 원하는 곳에 위치 시키거나, 데이터 라벨을 포맷하거나, 스 캐터 포인트의 마커 반경을 0으로 설정하거나 색상을 'rgba (255,255,255,0)'로 설정하십시오.

4) 너비가 0 인 plotlines과 format 라벨은 이에 따라

5) 자신의 레이블 http://api.highcharts.com/highcharts#Renderer을 그립니다 렌더링 기능을 사용

업데이트 :

위의 옵션의 대부분에 따라, 여백 및 또는 간격 설정을 조정해야 할 수도 있습니다 차트에서 n 요소를 배치 할 위치 ot는 축 ​​레이블이나 제목과 같은 방식으로 이러한 요소를 자동으로 조정합니다.