2012-04-23 12 views

risposta

8

vedo due modi di fissare il vostro problema:

  • modificare l'intervallo di zecca
  • modificare la visualizzazione dell'etichetta

ho applicato sia nel codice seguente (sezione asseX):

$(function() { 
var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 

    xAxis: { 
     type: 'datetime', 
     tickInterval : 7*24 * 3600 * 1000, 
     labels : { y : 20, rotation: -45, align: 'right' } 
    }, 
    series: [{ 
     data: [ 
      [Date.UTC(2010, 3, 11), 29.9], 
      [Date.UTC(2010, 4, 8), 71.5] 
     ] 
    }] 
}); 
+0

Mi dispiace ma non posso usare quelle soluzioni. – sabrina

+0

I dati del grafico vengono caricati in modo dinamico, l'impostazione tickInterval farebbe sì che le etichette si sovrappongano nei grafici con lunghi periodi di tempo. Anche l'impostazione di tickInterval in modo dinamico, a seconda dell'intervallo di tempo, non è una soluzione, poiché il grafico è zoomabile e lo zoom si sovrappone alle etichette. Anche io non posso ruotare le etichette, dal momento che devo copiare il design del nostro designer (il jsfiddle che ho collegato era solo un semplice esempio per far capire il problema). Ho provato a usare tickPixelInterval ma quando il periodo di tempo è breve, come nell'esempio, i pixel non vengono rispettati e le etichette si sovrappongono. Perché succede? Non c'è davvero nessuna soluzione? – sabrina

3

Forse staggerLines è una soluzione per voi:

xAxis: { 
    type: 'datetime', 
    labels: { 
     staggerLines: 2 
    } 
}, 

ho aggiornato il vostro jsfiddle con questa impostazione: http://jsfiddle.net/benebun/4ghhf/134/

Dal API Ref:

staggerLines: Number (Dal 2,1) solo

assi orizzontali. Il numero di righe per distribuire le etichette per creare etichette più o meno accentuate. .

(trovato tramite this comment su github)

I aggiornate tuo jsfiddle con questa impostazione: http://jsfiddle.net/benebun/4ghhf/134/

1

trovato la mia risposta qui: Highcharts overlapping category labels Io sto usando un array di categoria per le etichette asseX invece di lasciare Highcharts analizzano un codice di data UTC.

0

Può anche dipendere dal tipo di carattere che si sta utilizzando. Con me succede per Arial, ma funziona bene con Helvetica o Times New Roman.

0

Aveva lo stesso problema e risolto con lo autoRotation configuration. Grafici elevati ruotano automaticamente le etichette se non si adattano. Se ce ne sono troppi anche quando ruotati, Highcharts proverà a rimuovere automaticamente le etichette per te.

xAxis = { 
    "type": 'datetime', 
    "tickInterval": 30 * 24 * 3600 * 1000, 
    "labels": { 
     autoRotation: [45] 
    } 
} 

Basta assicurarsi che non si specifica passo in quanto avrà la precedenza autorotazione.

Problemi correlati