从 Google 图表中删除填充或边距

Posted 2023-02-16

【中文标题】从 Google 图表中删除填充或边距

【英文标题】：Remove padding or margins from Google Charts

【发布时间】：2012-03-28 12:30:33

【问题描述】：

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

在此示例中如何删除填充或边距？

【问题讨论】：

如果有人想右对齐，因为您在折线图的左侧有测量值，chartArea: width: '70%', left: '30%' 为我做了诀窍。来源：code.google.com/p/google-visualization-api-issues/issues/…

【参考方案1】：

有一个专门用于此的主题

options: 
  theme: 'maximized'

来自 Google 图表文档：

目前只有一个主题可用：

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

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

【讨论】：

这似乎是最好的选择。设置主题后：“最大化”仍然可以调整外观，例如高度：'90%'，textPosition：'out'等

【参考方案2】：

我和大多数遇到同样问题的人一样来到这里，震惊地发现没有一个答案是远程有效的。

对于任何感兴趣的人，这里是实际的解决方案：

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

... //rest of options

这里的键与“left”或“top”值无关。而是：

chart 和 chart-area 的尺寸均已设置并设置为 SAME VALUE

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

【讨论】：

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

我认为其他解决方案对您不起作用的原因可能是他们假设图表被插入到已经具有预设宽度和高度属性的 DIV 中，但您没有这样做.在 html 中预设高度和宽度是一个好主意，这样当图形填充时页面的布局不会改变。这将防止页面加载时“跳跃”。

@Dave 感谢您的建议，但我不一定同意。在很多情况下，您根本不知道这些值将是什么。看起来至少有 15 个人觉得我的产品足够了。

我同意，皮姆。当您事先不知道宽度和/或高度时（可能是因为您希望页面响应式调整），您无法在 DIV 中预设宽度和高度。我只是指出为什么我认为其他答案中给出的解决方案对他们有用但对你没有用，以及为什么如果可以的话在 DIV 中预设宽度和高度是个好主意。

由于@DaveBurton 指出的原因，如果使用 CSS Grid（我就是），这可能是正确的答案

【参考方案3】：

有这种可能like Aman Virk mentioned:

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

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

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

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

【参考方案4】：

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

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

Left 和 top 选项将定义从左到上的填充量。希望这会有所帮助。

【讨论】：

chartArea.top 为我的动态大小的 div 做了诀窍。谢谢。

【参考方案5】：

文档中没有（我使用的是 43 版），但您实际上可以使用图表区域的 right 和 bottom 属性：

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

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

【讨论】：

能够正确使用绝对是一个不错的补充，但是对于需要垂直轴数字的柱形图，当值波动很大时会变得很棘手 - 例如值范围为 0 - 100 的图表需要 20 像素的左值，但 0 - 10 百万需要 100 像素，使用 100 像素会留下相当大的余量，这是我认为我们所有人都在尝试的摆脱:) 除非有一个选项可以让图表调整我缺少的自己的宽度。关于如何解决这个问题的任何想法？

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

【参考方案6】：

通过添加和调整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'
    ;

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