2012-08-30 20 views
6

Ho creato un grafico Highcharts con colonne raggruppate e impilate, come nell'esempio trovato qui: http://www.highcharts.com/demo/column-stacked-and-grouped. L'esempio mostra un numero di frutti per 5 diverse persone, raggruppati per genere. Quello che mi manca in questo esempio, è un'etichetta dell'asse x che mostra il nome del gruppo (maschio o femmina) sotto ogni gruppo. È possibile aggiungere questo al grafico?etichette di colonne highcharts

Ecco una versione semplificata del grafico che sto cercando di realizzare: http://jsfiddle.net/WQjVP/66/. Mostra il numero di problemi aperti (blu) e scaduti (rossi) per tre posizioni in un sistema di gestione dei casi. La colonna di sinistra in ciascun gruppo mostra i numeri relativi a quel luogo per luglio, e la colonna di destra in ciascun gruppo mostra i numeri di agosto per la stessa unità. Quello che vorrei fare è mostrare il mese sotto ogni colonna, in modo che la prima colonna abbia "Jul", la seconda avrà "Aug", la terza avrà "Jul" e così via, tra la colonna e il etichetta di posizione.

chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 
    title: { 
     text: '' 
    }, 
    subtitle: { 
     text: '' 
    }, 
    xAxis: { 
     categories: ["Location A","Location B","Location C"], 
     title: { 
      text: "Location" 
     } 
    }, 
    yAxis: { 
     allowDecimals: false 

    }, 
    plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        if (this.y === 0) { 
         return null; 
        } 
        return this.y; 
       }, 
       style: { 
        color: 'white' 
       } 
      } 
     }, 
     column: { 
      stacking: 'normal', 
      borderWidth: 0 
     } 
    }, 
    series: [{ 
     "color": "rgb(0,0,255)", 
     "name": "open", 
     "data": [18, 2, 6], 
     "stack": "Jul"}, 
    { 
     "color": "rgb(255,0,0)", 
     "name": "overdue", 
     "data": [0, 0, 0], 
     "stack": "Jul"}, 
    { 
     "color": "rgb(0, 0, 255)", 
     "name": "open", 
     "data": [20, 1, 10], 
     "stack": "Aug"}, 
    { 
     "color": "rgb(255, 0, 0)", 
     "name": "overdue", 
     "data": [2, 1, 2], 
     "stack": "Aug"}] 
}); 
+0

non andando a mettere questo giù come risposta, perché è brutto. Ma che ne dici di creare un secondo xAxis che contenga le etichette che ti servono? Imposta la posizione xAxis dove ti serve e rimuovi la linea xAxis. – wergeld

risposta

15

Prova a utilizzare stackedLabels.

yAxis: { 
    stackLabels: { 
     enabled: true, 
     style: { 
      fontWeight: 'bold', 
      color: 'gray' 
     }, 
     formatter: function() { 
      return this.stack; 
     } 
    } 
} 

Demo

reference

Problemi correlati