hL'etichetta di Axis è troncata nel grafico di Google

Question

Per tracciare il numero di visitatori viene attraverso quale sito Web e fare qualche analisi sullo stesso. Stiamo creando un istogramma per mostrare il rapporto di analisi in forma grafica.

Tutte le cose vengono visualizzate correttamente sul grafico, ma stiamo mostrando il nome del sito web su haxis. Poiché il nome del sito web è troppo lungo come "www.google.com", www.facebook.com, questa etichetta è stata tagliata fuori dal codice.

Codice disegnare tabella è il seguente:

function createTodayChart(chartData){ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Sources'); 
    data.addColumn('number', 'Total Sales'); 

    for (var i in chartData){ 
    //alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1])); 
    data.addRow([chartData[i][0], parseInt(chartData[i][1])]); 
    } 

    var options = { 
    legend: {position:'top'}, 
    hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true}, 
    vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'}, 
    colors: ['#F1CA3A'] 
    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('my_div')); 
    chart.draw(data, options);  
} 

dati della ChartData variabile è in forma di matrice come:

var chartData = []; 
cartData.push('www.w3school.com', 106); 
cartData.push('www.google.com', 210); 

larghezza e altezza "mio_div" sono 350px e 300px rispettivamente. Abbiamo anche attaccato schermata di questo numero indicato di seguito:

qualcuno mi può aiutare, che come possiamo evitare questo problema di taglio. Oppure, esiste un metodo disponibile nell'API di Google Maps per impedirlo?

In attesa di soluzione.

Answer 1

questo è un tema sempre ricorrente in google visualizzazione, a mio parere :(Ci sono alcuni "trucchi" si può sperimentare con:. chartArea e hAxis.textPosition Ecco il codice in un jsFiddle con il seguente ChartData, riproducendo il problema sopra:

var chartData = [ 
    ['www.facebook.com', 45], 
    ['http://www.google.com', 67], 
    ['www.stackoverflow.com', 11]  
]; 

violino ->http://jsfiddle.net/a6WYw/

---

chartArea può essere utilizzato per regolare il "padding" superiore prendendo spazio dalla legenda/hAxis sottostante insieme all'altezza interna delle barre (il grafico stesso senza asse e legenda). Ad esempio

chartArea: { 
    top: 55, 
    height: '40%' 
} 

Si restringe il graficoArea, dando spazio alla legenda sull'asse.

violino ->http://jsfiddle.net/Swtv3/

---

Il mio preferito è quello di mettere il hAxis leggenda all'interno il grafico

hAxis : { textPosition : 'in' } 

Questa onorerà sia a breve che lunga descrizione ptions, e non rende il grafico troppo "strano" quando ci sono alcune stringhe molto lunghe.

violino ->http://jsfiddle.net/7HBmX/

---

Come per il commento - spostare i "in" etichette di fuori del grafico. Per quanto ne so, non esiste un modo nativo per farlo, ma possiamo sempre modificare lo <svg>. Questo può essere un compito difficile, ma in questo caso sappiamo che gli unici elementi <text> che ha l'attributo text-anchor="middle" sono le etichette dell'asse h e la descrizione complessiva dell'asse h. Quindi

var y, labels = document.querySelectorAll('[text-anchor="middle"]'); 
for (var i=0;i<labels.length-2;i++) { 
    y = parseInt(labels[i].getAttribute('y')); 
    labels[i].setAttribute('y', y+30); 
} 

per spostare le etichette all'esterno della tabella. demo ->http://jsfiddle.net/970opuu0/