Come si aggiunge del testo in basso al centro della legenda e in basso al centro del grafico sotto la legenda?

Question

Ho un HighCharts personalizzato con totali nella legenda. Devo aggiungere una riga di testo personalizzato centrata sotto i totali "nella legenda". Inoltre ho bisogno di aggiungere il centro del testo nella parte inferiore del grafico "sotto la legenda".

See violino: http://jsfiddle.net/no1uknow/cvsTB/

[EDIT] ho fatto capire questo molto fuori, ma non so come ottenere testo centrato in leggenda. http://jsfiddle.net/no1uknow/cvsTB/1/

$(function() { 
    var chart; 
    $(document).ready(function() { 



     var container_chartFreqAtaTailNum = new Highcharts.Chart({ 
     chart: { 
       renderTo: 'container_chartFreqAtaTailNum', 

         type: 'bar', 
         height: 795 

        }, 
        title: { 
         text: 'Frequency by Tail Number' 
        }, 
        subtitle: { 
         text: 'Fact ATA (25)' 
        }, 
        xAxis: { 
         categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'], 
         title: { 
          text: 'Tail Number' 
         }, 
         labels: { 
          style: { 
           width: '12000px' 
          } 
         } 
        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: 'Count', 
          align: 'high' 
         }, 
         labels: { 
          overflow: 'justify' 
         } 
        }, 
        tooltip: { 
         formatter: function() { 
          return ''+ this.series.name +': '+ this.y +' Count'; 
         } 
        }, 
        plotOptions: { 
         bar: { 
          dataLabels: { 
           enabled: true 
          } 
         }, 
         series: { 
          pointWidth:10, 
          groupPadding: .05, 
          shadow: true 
         } 
        }, 
        legend: { 
         layout: 'horizontal', 
         align: 'center', 
         verticalAlign: 'bottom', 
         floating: false, 
         borderWidth: 1, 
         backgroundColor: '#FFFFFF', 
         shadow: true, 
         labelFormatter: function() { 
          return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>'; 
         } 
        }, 
        credits: { 
         enabled: false 
        }, 
        exporting: { 
         enabled: true 
        }, 
        series: [{ 
       name: 'Heavy', 
       total: '5421', 
       data: [117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317] 
       },{ 
       name: 'Intermediate', 
       total: '4888', 
       data: [299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277] 
       },{ 
       name: 'Line', 
       total: '659', 
       data: [29,38,50,47,33,27,22,67,57,44,36,53,41,37,35,43] 
       },{ 
       name: 'Lite', 
       total: '2172', 
       data: [101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116] 
       }] 
       }); 

    }); 
}); 

Answer 1

spacingBottom è ciò che è necessario aggiungere, e inoltre è necessario prendersi cura della offset:

chart: { 
      events: { 
       load: function() { 
        var label = this.renderer.label("How do I move this center and under the legend.") 
        .css({ 
         width: '450px', 
         color: '#222', 
         fontSize: '16px' 
        }) 
        .attr({ 
         'stroke': 'silver', 
         'stroke-width': 2, 
         'r': 5, 
         'padding': 10 
        }) 
        .add(); 

        label.align(Highcharts.extend(label.getBBox(), { 
         align: 'center', 
         x: 0, // offset 
         verticalAlign: 'bottom', 
         y: 50 // set the right offset 
        }), null, 'spacingBox'); 

       } 
      }, 
      renderTo: 'container_chartFreqAtaTailNum', 
      type: 'bar', 
      height: 895, 
      spacingBottom: 100 // The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).   
     } 

Ecco il violino: http://jsfiddle.net/uMBHf/1/