从Google图表中移除填充或边距

// 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文档中列出的某些configuration选项，可以创build许多不同的样式。 例如， 这是一个版本 ，通过将chartArea.width设置为100％ ，将chartArea.height为80％ ，并将legend.position移动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

我很晚了，但是任何search这个的用户都可以从中获得帮助。 在选项内部，您可以传递一个名为chartArea的新参数。

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

左边和顶部的选项将定义左侧和顶部的填充量。 希望这会有所帮助。

Answer 3

我像大多数人一样到达这里，并且感到震惊，甚至没有一个答案远远地工作。

对于任何有兴趣的人，这里是实际的解决scheme

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

这里的关键与“左”或“顶”值无关 。 而是说：

图表和图表区域的尺寸都被设置并设置为相同的值

作为我的答案的修正案。 上面的确会解决“过度”填充/空白/空白问题。 但是，如果希望包含坐标轴标签和/或图例 ，则需要降低图表区域的高度和宽度，使其略低于外部宽度/高度。 这将“告诉”图表API有足够的空间来显示这些属性。 否则，它会愉快地排除它们。

Answer 4

有像阿曼·维尔克这样的可能性提到 ：

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

但请记住，填充和保证金不在那里打扰你。 如果您可以在不同types的图表（如ColumnChart和具有垂直列的图表）之间切换，则需要一些边距来显示这些行的标签。

如果你拿走了保证金，那么你最终将只显示一部分标签或根本没有标签。

所以，如果你只有一个图表types，那么你可以像Arman说的那样改变边距和填充。 但是，如果可以切换，不要改变它们。

Answer 5

它在文档中缺失（我正在使用版本43），但实际上可以使用图表区域的右侧和底部属性：

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

因此，可以使用完全响应的宽度和高度，并防止裁剪任何轴标签或图例。