从谷歌图表中删除填充或空白

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

在这个例子中如何删除填充或边距?

5 个解决方案

#1

208

By adding and tuning some configuration options listed in the API documentation, you can create a lot of different styles. For instance, here is a version that removes most of the extra blank space by setting the chartArea.width to 100% and chartArea.height to 80% and moving the legend.position to bottom:

通过添加和调优API文档中列出的一些配置选项，您可以创建许多不同的样式。例如，这里有一个版本通过设置chartArea来删除大部分额外的空白。宽度为100%，图表区域。高度达到80%，移动图例。位置到下:

// 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'}
    };

If you want to tune it more, try changing these values or using other properties from the link above.

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

#2

I am quite late but any user searching for this can get help from it. Inside the options you can pass a new parameter called chartArea.

我很晚了，但是任何用户搜索这个都可以得到帮助。在选项中可以传递一个名为chartArea的新参数。

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

Left and top options will define the amount of padding from left and top. Hope this will help.

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

#3

I arrived here like most people with this same issue, and left shocked that none of the answer even remotely worked.

我来到这里，就像大多数人一样，对这个问题感到震惊，甚至连远程工作的答案都没有。

For anyone interested, here is the actual solution:

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

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

The key here has nothing to do with the "left" or "top" values. But rather that the:

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

Dimensions of both the chart and chart-area are SET and set to the SAME VALUE

图表和图表区域的维度都被设置为相同的值

As an amendment to my answer. The above will indeed solve the "excessive" padding/margin/whitespace problem. However, if you wish to include axes labels and/or a legend you will need to reduce the height & width of the chart area so something slightly below the outer width/height. This will "tell" the chart API that there is sufficient room to display these properties. Otherwise it will happily exclude them.

作为对我答案的修正。上述方法确实可以解决“过度”填充/空白/空白的问题。但是，如果您希望包含轴标签和/或一个图例，您将需要减少图表区域的高度和宽度，因此略低于外部宽度/高度。这将“告诉”图表API，有足够的空间显示这些属性。否则它会很高兴地把他们排除在外。

#4

There is this possibility like Aman Virk mentioned:

有一种可能性就像安曼·威克提到的那样:

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

But keep in mind that the padding and margin aren't there to bother you. If you have the possibility to switch between different types of charts like a ColumnChart and the one with vertical columns then you need some margin for displaying the labels of those lines.

但请记住，填充和页边距并不会让你感到困扰。如果您有可能在不同类型的图表(如列线图和垂直列图)之间切换，那么您需要一些空白来显示这些行的标签。

If you take away that margin then you will end up showing only a part of the labels or no labels at all.

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

So if you just have one chart type then you can change the margin and padding like Arman said. But if it's possible to switch don't change them.

如果你只有一个图表类型那么你可以像Arman说的那样改变空白和填充。但如果可能的话，不要改变它们。

#5

It's missing in the docs (I'm using version 43), but you can actually use the right and bottom property of the chart area:

它在文档中没有(我使用的是43版)，但是您可以使用图表区域的right和bottom属性:

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

So it's possible to use full responsive width & height and prevent any axis labels or legends from being cropped.

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

#1

208

// 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'}
    };