grafico a barre flottante etichetta xaxis con testo ruotato da -90 problema di allineamento

Sto usando la libreria flot per progettare un grafico a barre in pila, in cui sto usando i seguenti file js.grafico a barre flottante etichetta xaxis con testo ruotato da -90 problema di allineamento

<script src="@Url.Content("~/Scripts/charts/excanvas.js")"></script> 
<script src="@Url.Content("~/Scripts/charts/jquery.flot.js")"></script> 
<script src="@Url.Content("~/Scripts/charts/jquery.flot.symbol.js")"></script>

Con il seguente script sto definendo il mio grafico a barre con testo ruotato dell'etichetta xaxis di -90 gradi.

$.each(data, function (index, item) { 
       i = (index + 1) * 2; 
       DataValues.push({ data: [i, item.Value], color: Color[i] }); 
       DataValues.push([i, item.Value]); 
       TickData.push([i, item.MonthName]); 
      }); 
      $.plot($("#CurrentYearlyTrendsBar"), [{ data: DataValues, color: "#3D69AA" }], 
        { 
         series: { bars: { show: true } }, 
         bars: { 
          barWidth: 1.5, 
          align: "center" 
         }, 
         xaxis: { 
          ticks: TickData, 
          axisLabelUseCanvas: true, 
          labelAngle: -90, 
         }, 
         yaxis: { axisLabelUseCanvas: true }, 
         grid: { hoverable: true } 
        }); 
      $("#CurrentYearlyTrendsBar").UseTooltip();

Il problema che sto avendo è con il posizionamento delle etichette xaxis. le etichette xaxis sono posizionate sul bordo sinistro della rispettiva barra nel grafico.

Si prega di suggerire come è possibile centrare l'allineamento delle etichette xaxis alle rispettive barre. Grazie in anticipo ...

fonte

2013-09-05 Shaggy

Puoi descrivere il problema con l'immagine o violino? –

Flot non supporta ancora le etichette dell'asse ruotato; quale plugin stai usando per farlo? Quale versione di Flot stai usando? – DNS

@captain Non riesco a aggiungere l'immagine in questione a causa della limitazione della reputazione minima da StackOverflow e non ho ancora usato il violinista. Quindi puoi suggerirmi come posso allegare un'immagine con la domanda, – Shaggy

Guardando il grafico sembra che siete confusi con flot termini .Coloro sono etichette non l'asse label.You vogliono ruotare le zecche questo potrebbe essere fatto senza guardare la vostra qualsiasi altro tick plug-in con la semplice aggiunta di qualche stile css

#CurrentYearlyTrendsBar div.xAxis div.tickLabel 
{  
    transform: rotate(-90deg); 
    -ms-transform:rotate(-90deg); /* IE 9 */ 
    -moz-transform:rotate(-90deg); /* Firefox */ 
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
    -o-transform:rotate(-90deg); /* Opera */ 
    /*rotation-point:50% 50%;*/ /* CSS3 */ 
    /*rotation:270deg;*/ /* CSS3 */ 
}

Si può anche fare uso di flot-tickrotor

fonte

2013-09-05 14:34:30

Ho provato a usare il css sopra, ma il lavoro con dosatore per me. Devo modificare la definizione del grafico per qualsiasi opzione? come rimuovere axisLabelUseCanvas: true, labelAngle: -90 dalla definizione. – Shaggy

Ciao, tornando da te dopo molto tempo per lo stesso problema; la definizione di stile che hai dato non funziona in IE 8 e precedenti. Quale alternativa dovrei usare? – Shaggy

Dovresti controllare la compatibilità con IE e utilizzare il plug-in (link) qui sopra. –

Ecco la mia soluzione per la rotazione dell'asse x etichette delle tacche.

.flot-x-axis .flot-tick-label { 
    white-space: nowrap; 
    transform: translate(-9px, 0) rotate(-60deg); 
    text-indent: -100%; 
    transform-origin: top right; 
    text-align: right !important; 

}

Questo mi ha dato questa

fonte

2016-05-13 11:46:37 Hiilo

Problema con questo è che se all'interno di un contenitore, le etichette saranno troncate, o overflow ... –

grafico a barre flottante etichetta xaxis con testo ruotato da -90 problema di allineamento

risposta

Problemi correlati