谷歌欄/柱形圖設置適當的標籤寬度和chartarea寬度

我使用谷歌圖表來呈現圖表，但有時標籤太長，圖表被切碎，有時圖表太長，標籤被切斷，請查看jsfiddle查看。谷歌欄/柱形圖設置適當的標籤寬度和chartarea寬度

google.load('visualization', '1', {packages: ['corechart']}); 
var graphTitle = '', dataPoints = []; 

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Option', 'Percent'], 
     ['More than 75%', 47], 
     ['50% to 74%', 36], 
     ['30% to 49%', 10], 
     ['10% to 29%', 4], 
     ['Less than 10%', 3]  
    ]); 

    $('body').data('quickpoll_179', data); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('quickpollChart')). 
    draw(data, { 
     title:'', 
     titleTextStyle: {color: '#000000'}, 
     width:640, height:340, 
     legend: {position:'none'}, 
     vAxis: {title: ""}, 
     hAxis: {title: "",format:"#'%'"}, 
     colors: ['#74317D'], 
     chartArea: {left:80.6,top:20, width:539.4,height:"340px"} 
    }); 
} 

google.setOnLoadCallback(drawVisualization);

我的問題是如何可以calc下適當的寬度，從而如果圖表是大的，我可以提高整個容器的大小和停止圖表和拉布勒被切斷。我知道這種情況下，我可以增加圖表區域，但它可能不適用於所有情況。所以它是更好的，我知道谷歌圖表需要多少空間，所以我可以動態地調整容器的寬度和高度

來源

2014-01-05 Gefferey Zhang

我會說只是減小字體的大小，這是谷歌的默認行爲圖表無法處理所有事情，如果標籤長度爲1000個字符，該怎麼辦？然後您需要橢圓，您仍然可以將鼠標懸停在標籤上查看全文。

查看更新後的提琴：http://jsfiddle.net/9J4sS/1/

我通過降低文本的大小來實現這一點。

vAxis: { 
    title: "", 
    textStyle: { 
    fontSize:8 
    } 
}

或者在圖表中使用顯示您的標籤。 http://jsfiddle.net/9J4sS/2/

vAxis: { 
    title: "", 
    textPosition: "in" 
}

來源

2014-01-05 12:40:40

您好，感謝您的回答，但我會還需要下載這個圖表作爲圖像，因此，如果它被切碎，圖像是不完整的，並且用戶將無法看到它。此外，酒吧裏的文字並不好，只是在酒吧旁邊會很好，但我認爲這不會是可能的 –

@GeffereyZhang然後我建議你使用將文本放入圖表的方法。 –

好的，謝謝。我想我現在沒有別的選擇 –

谷歌欄/柱形圖設置適當的標籤寬度和chartarea寬度

回答

相關問題