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

여기서 키 는 "left"또는 "top"값과 는 아무런 관련 이 없습니다 . 그러나 오히려 :

차트 및 차트 영역 의 차원 이 설정되고 같은 값으로 설정됩니다.

내 답변에 대한 수정으로. 위의 내용은 "과도한"패딩 / 여백 / 공백 문제를 실제로 해결합니다. 그러나 축 레이블 및 / 또는 범례 를 포함하려면 차트 영역의 높이와 너비를 줄여서 외부 너비 / 높이보다 약간 아래로 줄이십시오. 이 속성을 표시 할 충분한 공간이 있음을 차트 API에 "알립니다". 그렇지 않으면 행복하게 제외됩니다.

문서에서 누락되었지만 (버전 43을 사용하고 있음) 실제로 차트 영역 의 오른쪽 및 아래쪽 속성을 사용할 수 있습니다.

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

따라서 전체 응답 너비 및 높이를 사용하고 축 레이블 또는 범례가 잘리지 않도록 할 수 있습니다.

Aman Virk가 언급 한 것처럼 이 가능성이 있습니다 .

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

그러나 패딩과 여백은 당신을 귀찮게하지 않습니다. ColumnChart와 같은 다른 유형의 차트와 세로 열이있는 차트간에 전환 할 수있는 경우 해당 라인의 레이블을 표시하기 위해 약간의 여백이 필요합니다.

해당 여백을 제거하면 레이블의 일부만 표시되거나 레이블이 전혀 표시되지 않습니다.

따라서 차트 유형이 하나 인 경우 Arman과 같이 여백과 패딩을 변경할 수 있습니다. 그러나 전환이 가능한 경우 변경하지 마십시오.

이것을 위해 특별히 사용할 수있는 테마가 있습니다

options: {
  theme: 'maximized'
}

Google 차트 문서에서 :

현재 하나의 테마 만 사용할 수 있습니다.

'maximized'-차트 영역을 최대화하고 차트 영역 안에 범례와 모든 레이블을 그립니다. 다음 옵션을 설정합니다 :

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