2014-07-15 10 views
5

Ho un grafico a barre UI (Telerik) Kendo con nomi di etichette lunghi. Quando imposto la rotazione dell'etichetta su un valore diverso da 0,180,90,360, le etichette si inclinano ma usano il centro del testo come il punto obliquo invece dell'inizio del testo. Questo fa sì che tutte le etichette siano spente di una barra piena.Kendo UI Bar Chart Rotazione etichette

http://snag.gy/m2XxJ.jpg

C'è un modo per ottenere la tabella di utilizzare l'inizio dell'etichetta come il punto al posto del centro di rotazione?

risposta

8

L'unico modo per cui le etichette sono state allineate correttamente quando si utilizza la rotazione, è anche impostare il padding.

categoryAxis campione

categoryAxis: { field: 'name', labels: { rotation: -60, padding: { right: 10 }}} 

campione JSbin http://jsbin.com/zoloc/1/edit

Kendo Documentazione http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.labels.padding

+0

Il tuo esempio JSbin ha ancora lo stesso problema, le etichette non sono allineate correttamente, sono tutte ruotate al centro anziché all'inizio. È davvero difficile leggere il grafico –

0

risposta da Telerik:

Hai un valido punto. Ad esempio, Excel ruota il testo attorno al suo bordo sinistro. Analizzeremo questo problema, ma per il momento posso solo suggerire l'opzione multilinea nella prossima versione di Q2.

Sarete in grado di dividere le etichette utilizzando una nuova linea carattere: categorie: [ "JR Simplot \ nCOMPANY", ...]

3

È possibile utilizzare sia la rotazione e il margine per organizzare il testo dell'asse delle categorie come questo,

.CategoryAxis(axis => axis 
     .Categories(model => model.StudentName).Labels(labels => labels.Rotation(330).Margin(-5,45,0,0).Visible(true)) 
     .MajorGridLines(lines => lines.Visible(false)) 
     .Line(line => line.Visible(false)) 
    )