从Google Charts中移除填充或边距

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>

这是一个示例代码

如何在这个示例中去除内边距或外边距？

- Paul Armdam

---

如果您想要将线图的左侧测量值右对齐，可以使用chartArea: {width: '70%', left: '30%'}。这对我很有帮助。来源：https://code.google.com/p/google-visualization-api-issues/issues/detail?id=857#c5 - IsmailS

@IsmailS，如果我想在图表和文本之间添加填充或边距，就像这样看 - https://prnt.sc/8Sxqrp270e9- - vishal

Answer 1

通过添加和调整API文档中列出的一些配置选项，您可以创建许多不同的样式。例如，这里有一个版本，通过将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'}
    };

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

- 0eggxactly

Answer 2

虽然我来晚了，但任何搜索此内容的用户都可以从中获得帮助。在选项内，您可以传递一个名为chartArea的新参数。

返回结果：

虽然我来晚了，但任何搜索此内容的用户都可以从中获得帮助。在选项内，您可以传递一个名为chartArea的新参数。

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

左侧和顶部选项将定义从左侧和顶部的填充量。希望这可以帮到你。

- Aman Virk

---

chartArea.top对于我的动态大小的div很有用。谢谢。 - Blamkin86

Answer 3

像大多数人一样，我因为同样的问题来到这里，但离开时震惊地发现没有一个答案甚至能够部分解决我的问题。

对于任何有兴趣的人，以下是真正的解决方案：

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

这里的关键与“left”或“top”值没有任何关系。而是因为：

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

作为对我的回答的修正。上述方法确实解决了“过度”的填充/边距/空白问题。但是，如果您想包括坐标轴标签和/或图例，则需要将图表区域的高度和宽度减小到略低于外部宽度/高度的某个值。这将“告诉”图表API有足够的空间来显示这些属性。否则，它会欣然排除它们。

- pim

---

作为对我的答案的补充。这确实解决了“过多”的填充/边距/空白问题。但是，如果您希望包括轴标签和/或图例，则需要减小图表区域的高度和宽度，使其略低于外部宽度/高度。这将“告诉”图表API有足够的空间来显示这些属性。否则，它将很乐意排除它们。 - pim

我认为其他解决方案无法为您工作的原因可能是它们假定图表被插入到已经具有预设宽度和高度属性的DIV中，但您尚未这样做。在HTML中预设高度和宽度是一个好主意，这样当图表被填充时页面的布局不会改变。这将防止页面在加载时出现“跳动”的情况。 - Dave Burton

@Dave 感谢您的建议，但我并不完全同意。有很多情况下你根本就不知道这些值会是什么。而且至少还有15个人认为我的方案已经足够好了。 - pim

我同意，Pim。当你事先不知道宽度和/或高度（可能是因为你希望页面能够自适应响应），你不能在DIV中预设宽度和高度。我只是想指出为什么我认为其他答案中给出的解决方案对他们有效但对你无效，以及如果可以的话，在DIV中预设宽度和高度是个好主意的原因。 - Dave Burton

正如 @DaveBurton 指出的那样，如果使用 CSS Grid（我正在使用），这很可能是正确的答案。 - Stephen R

Answer 4

文档中缺失（我正在使用版本43），但实际上您可以使用图表区域的right和bottom属性：

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

因此，可以使用完全响应式的宽度和高度，同时避免任何坐标轴标签或图例被裁剪。

- Rob

---

能够正确使用是一个不错的补充，但是对于需要在垂直轴上使用数字的柱状图而言，当值波动较大时会变得棘手 - 例如，值范围从0-100的图表将需要左侧值为20像素，但0-10万则需要100像素，而使用100像素则会留下相当大的空白边距，这正是我们所有人都想要摆脱的 :) 除非有一种选项可以让图表自动调整其宽度，我可能会错过。您有什么想法吗？ - user3800174

看起来他们在2015年10月2日记录了它，链接在这里：http://archive.is/lwbQY#selection-2997.0-3011.1 - Dave Burton

Answer 5

有一个专门针对此问题的主题可用。

options: {
  theme: 'maximized'
}

从Google图表文档中得知：

目前只有一种主题可用：

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

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

- Ludo - Off the record

---

这似乎是最好的选择。在设置主题：“最大化”之后，仍然可以调整外观，例如高度：“90％”，文本位置：“out”等。 - Jiri Kriz

Answer 6

就像 Aman Virk 提到的那样，有这种可能性：

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

请记住，填充和边距不是为了困扰您而存在的。 如果您有可能在不同类型的图表之间切换，例如柱状图和具有垂直柱的图表，则需要一些边距来显示这些线条的标签。

如果您去掉那个边距，那么您最终只会显示部分标签或根本不显示标签。

因此，如果您只有一个图表类型，则可以像Arman所说的那样更改边距和填充。但是，如果可以进行切换，则不要更改它们。

- MmynameStackflow