Как форматировать высокие графики?

Question

Я использую highchart (jquery chart library). Я указываю ось с помощью всплывающей подсказки. теперь мне нужно отобразить значение оси y поверх соответствующей полосы. Как я могу это сделать

Мой пример графа

Вопрос: Для отображения YAxis значения в верхней части соответствующей панели в highchart.

Answer 1

Мой Окончательное решение является для моего будущего графа

 var chart; 

     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'faq_view_graph', 
       defaultSeriesType: 'column' 
      }, 
      title: { 
       text: 'Category View' 
      }, 
      xAxis: { 
       categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6', 'Category7', 'Category8', 'Category9', 'Category10'], 
       title:{ 
        text: 'Views' 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Category' 
       } 
      }, 
      tooltip: { 
       enabled: true, 
       formatter: function() { 
        return ''+this.series.name +': '+ this.y; 
       } 
      }, 
      point: { 
       events: { 
        click: function() { 
         alert('check'); 
        } 
       } 
      }, 

/////////////////////////////////////////////////////////////////////////////// 
      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 
           alert ('Category: '+ this.x +', value: '+ this.y); 
          } 
         } 
        } 
       } 
      }, 


/////////////////////////////////////////////////////////////////////////////// 



       series: [{ 
       name: 'Number of visits', 
       data: [5, 3, 4, 10, 2, 19, 56, 23, 21, 70], 
     //Codes to display value on top of each bar 
      dataLabels: { 
       enabled: true, 
       rotation: 0, 
       color: '#FFFFFF', 
       align: 'right', 
       x: -3, 
       y: 10, 
       formatter: function() { 
        return this.y; 
       }, 
       style: { 
        font: 'normal 13px Verdana, sans-serif' 
       } 
      } 
      }] 
     }); 
//////////////////////////////Graph///////////////////////////////////////////// 

    }); 

Answer 2

настройки вы ищете жить в series.dataLabels:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     defaultSeriesType: 'column' 
    }, 
    title: { 
     text: 'Category View' 
    }, 
    xAxis: { 
     categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Views' 
     } 
    }, 
    series: [{ 
     name: 'Number of Visits', 
     data: [5, 3, 4, 7, 2], 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return this.y; 
      } 
     }  
    }] 
}); 

Answer 3

Hightcharts имеет демо с желаемым поведением:

http://www.highcharts.com/demo/column-rotated-labels

Вот часть кода, который создает ярлыки на брусьях:

dataLabels: { 
    enabled: true, 
    rotation: -90, 
    color: Highcharts.theme.dataLabelsColor || '#FFFFFF', 
    align: 'right', 
    x: -3, 
    y: 10, 
    formatter: function() { 
    return this.y; 
    }, 
    style: { 
    font: 'normal 13px Verdana, sans-serif' 
    } 
}