// 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>
如何删除此示例中的填充或边距?
通过添加和调整API文档中列出的一些配置选项,您可以创建许多不同的样式。例如,这里有一个版本,通过将
chartArea.width
设置为 100%,将 chartArea.height
设置为 80%,并将 legend.position
移动到 bottom,从而删除大部分额外的空白:
// 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'}
};
如果您想进一步调整它,请尝试更改这些值或使用上面链接中的其他属性。
我已经很晚了,但任何搜索此内容的用户都可以从中获得帮助。在选项中,您可以传递一个名为 chartArea 的新参数。
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
这里的关键与“左”或“上”值“无关”。而是:
图表包括轴标签和/或图例和图表区域的尺寸均已设置并设置为相同值
作为对我的答案的修正。上面确实解决了“过多”的padding/margin/whitespace问题。但是,如果您希望
,您将需要减少图表区域的高度和宽度,使其略低于外部宽度/高度。这将“告诉”图表 API 有足够的空间来显示这些属性。否则它会很乐意排除它们。
和 bottom 属性:
var options = {
chartArea:{
left:10,
right:10, // !!! works !!!
bottom:20, // !!! works !!!
top:20,
width:"100%",
height:"100%"
}
};
因此可以使用完全响应式宽度和高度并防止任何轴标签或图例被裁剪。
options: {
theme: 'maximized'
}
来自 Google 图表文档:目前只有一个主题可用:
'maximized' - 最大化图表区域,并在图表区域内绘制图例和所有标签。设置以下选项:
chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}