hAxis Etikett ist in Google-Diagramm abgeschnitten

Question

Um die Anzahl der Besucher zu verfolgen kommt durch welche Website und einige Analysen auf dem gleichen. Wir erstellen ein Säulendiagramm, um den Analysebericht in grafischer Form anzuzeigen.

Alle Dinge sind korrekt in Diagramm angezeigt, aber wir zeigen Website-Namen auf Haxis. Da der Name der Website zu lang ist wie "www.google.com", www.facebook.com, wird dieses Label auf Haxis abgeschnitten.

-Code-Diagramm zu zeichnen ist unten angegeben:

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);  
} 

Daten in Chartdata variabel ist in Array-Form als:

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

Breite und Höhe der "my_div" sind 350px und 300 Pixel sind. Wir haben auch unten Screenshot dieser Ausgabe angehängt:

Kann jemand mir helfen, dass, wie können wir diese Schneid Problem zu vermeiden. Oder: Gibt es eine Methode in der Google-Diagramm-API, um dies zu verhindern?

Warten auf Lösung.

Answer 1

Dies ist ein immer wiederkehrendes Thema in Google Visualization, meiner Meinung nach :(Es gibt ein paar „Tricks“ ist eines mit experimentieren können. chartArea und hAxis.textPosition Hier ist der Code in einem jsFiddle mit dem folgende Chartdata, das Problem reproduzieren oben:

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

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

---

chartArea kann verwendet werden, um die obere "Polsterung" anzupassen, die Platz von der Legende/hAchsen unten zusammen mit der internen Höhe der Balken (das Diagramm selbst ohne Achse und Legende) nimmt. Zum Beispiel:

Schrumpft die DiagrammArea und gibt Platz für die Legende auf der Achse.

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

---

Mein persönlicher Favorit ist die hAxis Legende innerhalb das Diagramm von

hAxis : { textPosition : 'in' } 

Dies wird ehren platzieren kurz- und lange Beschreibung ptions, und macht das Diagramm nicht zu "komisch", wenn es ein paar sehr lange Strings gibt.

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

---

Wie pro Kommentar - bewegen Sie die "in" Etiketten außerhalb des Diagramms. Es gibt meines Wissens keine einheimische Methode, dies zu tun, aber wir können immer die <svg> ändern. Diese kann eine schwierige Aufgabe sein, aber in diesem Fall wissen wir, dass die einzigen <text> Elemente, die das text-anchor="middle" Attribut hat, die h-Achse Etiketten und die gesamte h-Achse Beschreibung ist. Also

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); 
} 

, um die Etiketten außerhalb des Diagramms zu verschieben. Demo ->http://jsfiddle.net/970opuu0/