web-dev-qa-db-ja.com

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>

フィドルの例

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

javascripthtmlchartsgoogle-visualization
141
Paul Armdam

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

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

229
Devourant

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

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

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

73
Aman Virk

同じ問題を抱えるほとんどの人と同じように私はここに到着し、答えがどれもリモートでさえ働かないことにショックを受けました。

興味のある方のために、実際のソリューションを以下に示します。

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

ここのキーには、「左」または「上」の値を処理するnothingがあります。しかし、むしろ：

chartとchart-areaの両方の寸法が設定され、同じ値に設定されます

私の答えの修正として。上記は実際に「過剰な」パディング/マージン/空白の問題を解決します。ただし、軸ラベルおよび/または凡例を含むを使用する場合は、チャート領域の高さと幅を小さくして、外側の幅/高さよりも少し下にする必要があります。これにより、これらのプロパティを表示するのに十分なスペースがあることをチャートAPIに「伝えます」。それ以外の場合は、喜んで除外します。

51
pim

この可能性があります 言及されたアマン・バークのような ：

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

しかし、パディングとマージンはあなたを悩ますためにそこにないことに注意してください。 ColumnChartなどのさまざまな種類のグラフと垂直列を持つグラフを切り替える可能性がある場合は、それらの行のラベルを表示するためのマージンが必要です。

その余白を取り除いた場合、ラベルの一部のみが表示されるか、ラベルがまったく表示されなくなります。

したがって、チャートタイプが1つだけの場合は、Armanが言ったようにマージンとパディングを変更できます。ただし、切り替えが可能な場合は変更しないでください。

13
MmynameStackflow

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

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

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

12
Rob

これに特化したテーマがあります

options: {
  theme: 'maximized'
}

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

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

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

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
0
Ludo - Off the record