Удалить отступы или поля из Google Charts


151

// 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>

Пример скрипки

Как мне удалить отступы или поля в этом примере?


если кто-то захочет выправить вправо, потому что у вас есть измерения слева от линейного графика, chartArea: {width: '70%', left: '30%'}то мне удалось. Источник: code.google.com/p/google-visualization-api-issues/issues/…
IsmailS

Ответы:


246

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

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


78

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

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

Параметры left и top будут определять количество отступов слева и сверху. Надеюсь, это поможет.


chartArea.top помог мне с моим динамически изменяемым размером. Спасибо.
Blamkin86

60

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

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

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

Ключ здесь не имеет никакого отношения к «левым» или «верхним» значениям. А скорее что:

Размеры диаграммы и области диаграммы установлены и установлены на одинаковое значение

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


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

1
Я думаю, что причина, по которой другие решения не сработали для вас, заключается в том, что они предположили, что диаграмма вставлялась в DIV, который уже имел предустановленные атрибуты ширины и высоты, но вы этого не сделали. Хорошей идеей является задание высоты и ширины в HTML, чтобы макет страницы не менялся при заполнении графика. Это предотвратит «перепрыгивание» страниц на странице во время загрузки.
Дэйв Бертон,

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

1
Я согласен, Пим. Если вы заранее не знаете ширину и / или высоту (возможно, потому что вы хотите, чтобы страница адаптировалась быстро), вы не можете предварительно установить ширину и высоту в DIV. Я просто указывал, почему я думаю, что решения, приведенные в других ответах, сработали для них, но не сработали для вас, и почему это хорошая идея - предварительно установить ширину и высоту в DIV, если вы можете.
Дейв Бертон,

1
По причинам, указанным @DaveBurton, вероятно, это правильный ответ, если вы работаете с CSS Grid (которым я являюсь)
Стивен Р.

14

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

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

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


Возможность использовать право, безусловно, является хорошим дополнением, однако в случае столбцовой диаграммы, для которой требуются числа для вертикальной оси, будет сложнее, когда значения колеблются на хороший бит - например, диаграмма со значениями в диапазоне от 0 - Для 100 потребуется левое значение 20 пикселей, но для 0 - 10 мил потребуется 100 пикселей, а использование 100 пикселей оставит довольно большой запас, от которого, я думаю, все мы пытаемся избавиться :) Если только нет опция, которая позволяет диаграмме настроить собственную ширину, которую я пропускаю. Есть мысли о том, как можно решить эту проблему?
user3800174

Похоже, что они задокументировали это 2 октября 2015 года, здесь: archive.is/lwbQY#selection-2997.0-3011.1
Дейв Бертон,

13

Есть такая возможность, как упоминал Аман Вирк :

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

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

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

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


12

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

options: {
  theme: 'maximized'
}

из документации Google диаграммы:

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

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

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

Это кажется лучшим вариантом. После установки темы: «развернуто», все еще можно настроить внешний вид, например, высота: «90%», textPosition: «out» и т. Д.
Jiri Kriz
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.