hAxis etiketi Google grafikte kesildi

Question

Ziyaretçi sayısını takip etmek için hangi web sitesinden gelebilir ve analizler yapabilirsiniz. Analiz raporunu grafik biçiminde göstermek için bir sütun şeması oluşturuyoruz.

Her şey doğru şekilde haritada gösteriliyor, ancak haxis sitesinde web sitesi adı gösteriliyor. Web sitesi adı "www.google.com", www.facebook.com gibi çok uzun olduğundan, bu etiket haxis'te kesiliyor. grafik çizmek için

Kod aşağıda verilmiştir:

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

Veri ChartData değişken olarak dizi formdadır:

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

Genişlik ve "my_div" yüksekliği, sırasıyla 350 piksel ve 300px bulunmaktadır.

Herkes nasıl bu kesim sorunu önlemek olduğunu bana yardımcı olabilir: Biz de aşağıda verilen bu konunun ekran görüntüsü eklenmiş. Veya, Google grafik API'sinde bunu önlemek için herhangi bir yöntem kullanılabilir mi?

Çözüm bekleniyor.

Answer 1

Bu, bence :(birkaç "hileler" tek deneyebilirsiniz vardır google görselleştirme bir zaman yinelenen bir konudur. chartArea ve hAxis.textPosition Burada aşağıdaki ChartData ile jsFiddle daki kod sorunu yeniden vardır yukarıda:

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

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

---

chartArea, alt kısımdaki legend/hAxis'ten boşluk alan üst "tamponlamayı" ayarlamak için, çubukların iç yüksekliğiyle (eksen ve gösterge olmadan grafik) ayarlanır. Örneğin, grafiti küçültecek ve hAxis üzerindeki efsaneye yer açacaktır.

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

---

Benim kişisel favori Bu onur

hAxis : { textPosition : 'in' } 

tarafından grafik içeride hAxis efsane yerleştirmektir hem kısa hem de uzun descri ptions, ve birkaç çok uzun dizeleri olduğunda grafik "garip" görünmez.

keman - comment gereğince>http://jsfiddle.net/7HBmX/

---

- grafikte dışında "in" etiketleri taşıyın. Benim bildiğim kadarıyla bunu yapmak için yerel bir yol yok, ama biz her zaman <svg>'u değiştirebiliriz. Bu ,'u zor bir görev olabilir, ancak bu durumda, text-anchor="middle" özniteliğine sahip olan yalnızca <text> öğelerinin, h eksenli etiketler ve genel h ekseni açıklaması olduğunu biliyoruz. Etiketleri grafik dışına taşımak için

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

. demosu - http://jsfiddle.net/970opuu0/