Remove padding or margins from Google Charts

// 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

How do I remove padding or margins in this example?

142934 次浏览
小开

通过添加和调优 API 文档中列出的一些配置选项，您可以创建许多不同的样式。例如，这里有一个版本通过将 chartArea.width设置为 百分百确定，将 chartArea.height设置为 百分之八十，并将 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'}
};

如果您想对它进行更多的优化，请尝试更改这些值或使用上面链接中的其他属性。

小开

我是相当晚，但任何用户搜索这可以得到帮助从它。在这些选项中，您可以传递一个名为 < em > 海图区 的新参数。

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

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

小开

有这种可能性 就像阿曼 · 维克提到的那样:

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

但是请记住，填充和边距不会打扰你。 如果您可以在不同类型的图表之间切换，比如柱状图和带有垂直列的图表，那么您需要一些空白来显示这些线的标签。

如果你去掉那个空白，那么你最终只会显示标签的一部分，或者根本没有标签。

因此，如果你只有一个图表类型，然后你可以改变边距和填充，如阿尔曼所说。但如果有可能改变，不要改变他们。

小开

我和大多数有同样问题的人一样来到这里，离开的时候震惊地发现，没有一个答案是有用的。

对于任何感兴趣的人，以下是实际的解决方案:

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

这里的键与“ left”或“ top”值有关，而是指:

图表和 海图面积的尺寸都被设置为相同的值

作为对我答案的修正。上述方法确实可以解决“过多”的空白/边距/空白问题。然而，如果你想要 包括轴标签和/或图例，你需要减少图表区域的高度和宽度，使其略低于外部宽度/高度。这将“告诉”图表 API 有足够的空间来显示这些属性。否则它会很高兴地排除他们。

小开

它在文档中没有出现(我使用的是43版本) ，但是实际上可以使用图表区域的 对和 底部属性:

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

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

小开

有一个专门的主题

options: {
theme: 'maximized'
}

来自谷歌图表文档:

目前只有一个主题:

“最大化”-最大化图表的面积，并绘制图例和图表区域内的所有标签。设置以下选项:

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

提交答案