hAxis標籤在Google圖表中被切斷

跟蹤訪問者的數量來自哪個網站並對其進行一些分析。我們正在創建一個柱形圖以圖形形式顯示分析報告。hAxis標籤在Google圖表中被切斷

所有的東西都在圖表上正確顯示，但我們在haxis上顯示網站名稱。由於網站名稱太長，比如「www.google.com」，www.facebook.com，這個標籤正在被中斷。

代碼繪製圖表下面給出：

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

數據在chartData變量以陣列形式爲：

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

寬度和分別的「my_div」高度是350像素300像素和。我們還附上下面給出這個問題的屏幕截圖：

enter image description here

誰能幫助我，我們如何防止這個領域的問題。或者，谷歌圖表API中有沒有可用的方法來防止這種情況發生？

等待解決方案。

來源

2014-07-08 user2393886

你能提供的數據/'chartData'的例子嗎？ – davidkonrad

這是谷歌可視化的總是反覆出現的問題，在我看來:(有幾個「招數」一個可以體驗：chartArea和這是您與以下chartData一個的jsfiddle代碼，重現問題以上：

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

enter image description here

小提琴 - >http://jsfiddle.net/a6WYw/

chartArea可以用來調整從圖例/ hAxis以及酒吧的內部高度（圖表本身沒有座標軸和圖例）中獲取空間的上部「填充」。例如

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

將縮小chartArea，給hAxis上的圖例留出空間。

enter image description here

小提琴 - >http://jsfiddle.net/Swtv3/

我個人最喜歡的是將hAxis傳說內圖表由

hAxis : { textPosition : 'in' }

這將兌現短期和長敘述當有幾個很長的字符串時，並不會使圖表看上去太「奇怪」。

enter image description here

小提琴 - >http://jsfiddle.net/7HBmX/

作爲每評論 - 移動圖表外的「中」的標籤。據我所知，沒有原生的方式來做到這一點，但我們總是可以改變<svg>。這可以是一個困難的任務，但在這種情況下，我們知道具有text-anchor="middle"屬性的唯一<text>元素是h軸標籤和整體h軸說明。因此，

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

將標籤移動到圖表外部。演示 - >http://jsfiddle.net/970opuu0/

來源

2014-07-08 12:41:45 davidkonrad

感謝您的回覆，但我們希望海圖標籤不在圖表中，並且由於長標籤，我們必須以某個角度顯示標籤。問題是，標籤被切斷時，haxis標題「來源」和標籤之間沒有間隔。由於哪個標籤在haxis標題上重疊。 – user2393886

@ user2393886，「問題是，當標籤被切斷並且haxis標題」Source「和label._」之間沒有間隔時，我已經更新了示例，例如'chartArea'解決方案 - 可能不夠清楚。現在它演示瞭如何顯示所有文本，並在標籤/「源」之間留有一定的空間。 – davidkonrad

有可能以與「in」選項相同的方式顯示文本，但在圖表之外？ – marimaf

hAxis標籤在Google圖表中被切斷

回答

相關問題