Удалите дополнения или поля из графиков 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>

Ответы

Ответ 1

Добавив и настроив некоторые параметры конфигурации, перечисленные в документации 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'}
    };

Если вы хотите настроить его больше, попробуйте изменить эти значения или использовать другие свойства из указанной выше ссылки.

Ответ 2

Я довольно поздно, но любой пользователь, ищущий это, может получить от него помощь. Внутри параметров вы можете передать новый параметр chartArea.

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

Левая и верхняя опции определяют количество отступов слева и сверху. Надеюсь, это поможет.

Ответ 3

Я приехал сюда, как и большинство людей с этой же проблемой, и оставил в шоке, что ни один из ответов даже не работал удаленно.

Для всех, кто интересуется, вот фактическое решение:

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

Ключ здесь имеет ничего для "левых" или "верхних" значений. Но скорее, что:

Размеры как диаграммы, так и области диаграммы являются SET и устанавливаются в SAME VALUE

Как поправка к моему ответу. Вышеизложенное действительно решит проблему "чрезмерного" заполнения/поля/пробела. Однако, если вы хотите, чтобы включал метки осей и/или легенду, вам необходимо уменьшить высоту и ширину области диаграммы так, чтобы что-то немного ниже внешней ширины/высоты. Это "скажет" API диаграмм, что есть достаточно места для отображения этих свойств. В противном случае он с радостью исключит их.

Ответ 4

Существует такая возможность как упоминается Аман Вирк:

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

Но имейте в виду, что отступы и разметка вас не беспокоят. Если у вас есть возможность переключаться между различными типами диаграмм, такими как ColumnChart и один с вертикальными столбцами, вам потребуется некоторое поле для отображения меток этих строк.

Если вы уберете эту маржу, тогда вы в конечном итоге покажете только часть ярлыков или никаких ярлыков.

Итак, если у вас только один тип диаграммы, вы можете изменить маржу и отступы, как сказал Арман. Но если это можно переключить, не меняйте их.

Ответ 5

Он отсутствует в документах (я использую версию 43), но вы действительно можете использовать свойства справа и внизу в области диаграммы:

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

Таким образом, можно использовать полную гибкую ширину и высоту и предотвращать обрезку любых меток или легенд осей.

Ответ 6

Специально для этого есть тема

options: {
  theme: 'maximized'
}

из документов Google Chart:

В настоящее время доступна только одна тема:

"максимизировано" - максимизирует область диаграммы и рисует легенду и все метки внутри области диаграммы. Устанавливает следующие параметры:

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