Видаліть прокладки або поля з графіків 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

Ключ тут не має нічого спільного зі значеннями "ліворуч" або "верхній". Але швидше, що:

Розміри як діаграми, так і області діаграми встановлюються та встановлюються на однакову величину

Як доповнення до моєї відповіді. Сказане дійсно вирішить проблему "надмірного" набивання / запасу / пробілу. Однак, якщо ви хочете включити мітки осей та / або легенду, вам потрібно зменшити висоту та ширину області діаграми, щоб трохи менше зовнішньої ширини / висоти. Це "скаже" API діаграми, що є достатньо місця для відображення цих властивостей. Інакше це їх щасливо виключить.

Він відсутній у документах (я використовую версію 43), але ви можете фактично використовувати право та нижнє властивість області діаграми:

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, та тією, що має вертикальні стовпці, тоді вам потрібен певний запас для відображення міток цих рядків.

Якщо ви знімете цей запас, тоді ви побачите лише частину міток або взагалі відсутні етикетки.

Тож якщо у вас є лише один тип діаграми, ви можете змінити поля та прокладки, як сказав Арман. Але якщо є можливість переключення, не змінюйте їх.

Існує тема, доступна спеціально для цього

options: {
  theme: 'maximized'
}

з документів діаграми Google:

Наразі доступна лише одна тема:

'максимізовано' - Максимізує область діаграми та малює легенду та всі мітки всередині діаграми. Встановлює такі параметри:

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