从谷歌图表

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%" 
    } 
}; 

所以它可以使用全响应宽度为&高度，并防止裁剪任何轴标签或图例。