Google 차트에서 패딩 또는 여백 제거

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.width100%로 그리고chartArea.height80%로 이동합니다.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

여기서 키는 "왼쪽" 또는 "위쪽" 값과는 무관합니다.하지만 그보다 더 중요한 것은:

차트와 차트 영역의 치수가 모두 SET되어 동일한 값으로 설정됩니다.

내 대답에 대한 수정으로.위의 내용을 통해 "과도한" 패딩/마진/백스페이스 문제를 해결할 수 있을 것입니다.그러나 축 레이블 및/또는 범례를 포함하려면 차트 영역의 높이와 너비를 줄여 바깥쪽 너비/높이보다 약간 아래로 이동해야 합니다.이렇게 하면 차트 API에 이러한 속성을 표시할 수 있는 충분한 공간이 있음을 "알려줍니다.그렇지 않으면 기꺼이 그들을 배제할 것입니다.

문서(버전 43 사용 중)에는 없지만 차트 영역의 오른쪽 및 아래 속성을 실제로 사용할 수 있습니다.

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

따라서 전체 응답 너비 및 높이를 사용할 수 있으며 축 레이블이나 범례가 잘리는 것을 방지할 수 있습니다.

여기에 특별히 사용할 수 있는 테마가 있습니다.

options: {
  theme: 'maximized'
}

Google 차트 문서에서 다음을 참조하십시오.

현재 사용 가능한 테마는 하나입니다.

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

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

Aman Virk가 언급한 것과 같은 가능성이 있습니다.

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

하지만 패딩과 마진은 당신을 괴롭힐만한 것이 아니라는 것을 명심하세요.열 차트와 수직 열이 있는 차트와 같은 다른 유형의 차트를 전환할 수 있는 경우 해당 선의 레이블을 표시하기 위한 여유가 필요합니다.

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

따라서 차트 유형이 하나만 있다면 Arman이 말한 것처럼 마진과 패딩을 변경할 수 있습니다.그러나 전환이 가능하다면 변경하지 마십시오.

언급URL : https://stackoverflow.com/questions/9661456/remove-padding-or-margins-from-google-charts