從谷歌圖表

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>

Example fiddle

如何刪除填充或利潤率在這個例子中刪除填充或利潤率？

Answer 1

通過添加和調整API documentation中列出的某些配置選項，可以創建許多不同的樣式。例如，here is a version，通過設置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

有這種可能性like Aman Virk mentioned：

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

但是請記住，填充和保證金是不是有打擾你。 如果您可以在不同類型的圖表（如ColumnChart和具有垂直列的圖表）之間切換，那麼您需要一些餘量來顯示這些行的標籤。

如果您拿走了該保證金，那麼您最終只會顯示部分標籤或根本沒有標籤。

所以，如果你只有一個圖表類型，那麼你可以像Arman說的那樣改變邊距和填充。但如果可以切換，不要改變它們。

Answer 4

我像大多數人一樣來到這裏，對這個同樣的問題感到震驚，甚至沒有答案甚至遠程工作。

任何有興趣，這裏是實際的解決方案：

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

這裏的關鍵有什麼做的「左」或「頂」的價值觀。而是說：無論是圖和圖區域的

尺寸設置，並設置爲相同的值

作爲一項修正案，我的答案。上述確實會解決「過度」的填充/空白/空白問題。但是，如果您希望包含軸標籤和/或圖例，則需要將圖表區域的高度減小爲略低於外部寬度/高度的寬度。這將「告訴」圖表API有足夠的空間顯示這些屬性。否則它會高興地排除它們。

Answer 5

它缺少在文檔（我使用的版本43），但實際上你可以使用圖表區的權和底部屬性：

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

所以它可以使用全響應寬度爲&高度，並防止裁剪任何軸標籤或圖例。