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

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>

小提琴示例

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

我像大多数遇到同样问题的人一样来到这里，但离开时感到震惊，因为所有答案都没有远程工作。

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

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

这里的关键与“左”或“上”值“无关”。而是：

图表

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

作为对我的答案的修正。上面确实解决了“过多”的padding/margin/whitespace问题。但是，如果您希望

包括轴标签和/或图例

，您将需要减少图表区域的高度和宽度，使其略低于外部宽度/高度。这将“告诉”图表 API 有足够的空间来显示这些属性。否则它会很乐意排除它们。

Answer 4

right

和 bottom 属性：

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

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

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

Answer 6

就像Aman Virk提到的

：

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

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

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

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

Answer 7