從Google圖表中刪除填充或邊距

Question

 // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); var myData = { 'Mushrooms': 3, 'Onions': 1, 'Olives': 1, 'Zucchini': 1, 'Pepperoni': 2 }; var rows = []; for (element in myData) { rows.push([element + " (" + myData[element] + ")", myData[element]]) } data.addRows(rows); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':450, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div> 

示例小提琴

如何在此示例中刪除填充或邊距？

Answer 1

通過添加和調整API文檔中列出的一些配置選項，您可以創建許多不同的樣式。 舉例來說， 這里是一個版本 ，通過設置去除大部分多余的空格的chartArea.width 100％， chartArea.height至80％，而移動legend.position到下 ：

// Set chart options
var options = {'title': 'How Much Pizza I Ate Last Night',
               'width': 350,
               'height': 400,
               'chartArea': {'width': '100%', 'height': '80%'},
               'legend': {'position': 'bottom'}
    };

如果您想更多地調整它，請嘗試更改這些值或使用上面鏈接中的其他屬性。

Answer 2

我很晚，但任何搜索此用戶的用戶都可以從中獲得幫助。 在選項中，您可以傳遞一個名為chartArea的新參數。

        var options = {
        chartArea:{left:10,top:20,width:"100%",height:"100%"}
    };

左側和頂部選項將定義從左側和頂部填充的數量。 希望這會有所幫助。

Answer 3

我像大多數人一樣來到這里同樣的問題，並且震驚的是，沒有任何答案甚至遠程工作。

對於任何感興趣的人，這是實際的解決方案：

... //rest of options
width: '100%',
height: '350',
chartArea:{
    left:5,
    top: 20,
    width: '100%',
    height: '350',
}
... //rest of options

這里的關鍵與“左”或“頂”值無關 。 而是那個：

圖表和圖表區域的尺寸均為SET，並設置為相同值

作為我的答案的修正案。 以上將確實解決“過度”填充/邊距/空白問題。 但是，如果您希望包含軸標簽和/或圖例 ，則需要減小圖表區域的高度和寬度，使其略低於外部寬度/高度。 這將“告訴”圖表API有足夠的空間來顯示這些屬性。 否則它會愉快地排除它們。

Answer 4

像Aman Virk這樣的可能性提到 ：

var options = {
    chartArea:{left:10,top:20,width:"100%",height:"100%"}
};

但請記住，填充和邊距不會打擾你。 如果您可以在不同類型的圖表（如ColumnChart）和具有垂直列的圖表之間切換，則需要一些余量來顯示這些行的標簽。

如果你拿走那個邊距，那么你最終只會顯示部分標簽或根本沒有標簽。

因此，如果您只有一種圖表類型，那么您可以像Arman所說的那樣更改邊距和填充。 但如果有可能切換不改變它們。

Answer 5

它在文檔中缺失（我使用的是版本43），但您實際上可以使用圖表區域的右側和底部屬性：

var options = {
  chartArea:{
    left:10,
    right:10, // !!! works !!!
    bottom:20,  // !!! works !!!
    top:20,
    width:"100%",
    height:"100%"
  }
};

因此，可以使用完整的響應寬度和高度，並防止任何軸標簽或圖例被裁剪。

Answer 6

有專門針對此的主題

options: {
  theme: 'maximized'
}

來自Google圖表文檔：

目前只有一個主題可用：

'maximized' - 最大化圖表區域，並在圖表區域內繪制圖例和所有標簽。 設置以下選項：

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}