Googleチャートからパディングまたはマージンを削除する

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

フィドルの例

この例でパディングまたはマージンを削除するにはどうすればよいですか？

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

さらに調整したい場合は、これらの値を変更するか、上のリンクから他のプロパティを使用してみてください。

私はかなり遅れていますが、これを検索しているユーザーは誰でも助けを得ることができます。オプション内で、chartAreaという新しいパラメーターを渡すことができます。

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

左と上のオプションは、左と上からのパディングの量を定義します。これがお役に立てば幸いです。

私はこれと同じ問題を抱えているほとんどの人と同じようにここに到着しましたが、遠隔でうまくいった答えもなかったのでショックを受けました。

興味のある方のために、ここに実際の解決策があります：

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

ここでのキーは、「左」または「上」の値とは関係ありません。しかし、むしろ：

グラフとグラフ領域の両方のディメンションが設定され、同じ値に設定されます

私の答えの修正として。上記は実際に「過剰な」パディング/マージン/空白の問題を解決します。ただし、Axesのラベルや凡例を含める場合は、チャート領域の高さと幅を減らして、外側の幅/高さよりも少し下にする必要があります。これにより、これらのプロパティを表示するための十分な余地があることがチャートAPIに「通知」されます。そうでなければ、喜んでそれらを除外します。

ドキュメントにはありません（バージョン43を使用しています）が、実際にはグラフ領域のrightプロパティとbottomプロパティを使用できます。

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

したがって、完全なレスポンシブ幅と高さを使用して、軸ラベルや凡例がトリミングされるのを防ぐことができます。

アマン・バークが言及したように、この可能性があります：

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

しかし、パディングとマージンはあなたを困らせるためにそこにないことに注意してください。ColumnChartのようなさまざまなタイプのグラフと垂直列のあるグラフを切り替える可能性がある場合、それらの線のラベルを表示するためのマージンが必要です。

そのマージンを取り除くと、ラベルの一部のみが表示されるか、ラベルがまったく表示されなくなります。

したがって、グラフの種類が1つしかない場合は、Armanが言ったようにマージンとパディングを変更できます。ただし、切り替えが可能な場合は変更しないでください。

このために特別に利用可能なテーマがあります

options: {
  theme: 'maximized'
}

Googleチャートドキュメントから：

現在使用できるテーマは1つだけです。

'maximized'-グラフの領域を最大化し、凡例とグラフ領域内のすべてのラベルを描画します。次のオプションを設定します。

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