Highcharts пытается показать ярлыки непосредственно слева от столбцов

Question

У меня есть этот график высоких диаграмм, и я пытаюсь добавить метки, такие как «Всего» или «Процент», которые будут отображаться непосредственно слева от всех номеров, окружающих график. Мне интересно, есть ли элегантный способ сделать это в highcharts, чтобы избежать использования html. Это будет нечто вроде дополнительной колонки, которая невидима или что-то еще. Благодаря!

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) Используйте свойство tickPositions для оси у, и форматировать метки при необходимости: http://api.highcharts.com/highcharts#yAxis.tickPositions

3) Используйте серию рассеивает с метками данных , Расположите точку, в которой она вам нужна, отформатируйте метку данных, установите радиус маркера точки рассеивания равным 0 или цвет в 'rgba (255,255,255,0)'

4) используйте графические линии с шириной 0 и форматом метка соответственно

5) использовать функцию рендеринга, чтобы сделать свои собственные метки http://api.highcharts.com/highcharts#Renderer

Update:

Большинство из представленных выше опций может потребоваться настроить полей и или распорных настройки, в зависимости от где вы поместите элемент, так как диаграмма n автоматически настраивать эти элементы так, как это делается для метки или названия оси.