Remover preenchimento ou margens do 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>

Violino de exemplo

Como removo preenchimento ou margens neste exemplo?


se alguém quiser justificar à direita porque você tem medidas à esquerda do gráfico de linhas, chartArea: {width: '70%', left: '30%'}fiz o truque para mim. Fonte: code.google.com/p/google-visualization-api-issues/issues/…
IsmailS

Respostas:


246

Ao adicionar e ajustar algumas opções de configuração listadas na documentação da API , você pode criar muitos estilos diferentes. Por exemplo, aqui está uma versão que remove a maior parte do espaço extra em branco, definindo o chartArea.widthpara 100% e chartArea.heightde 80% e movendo o legend.positionpara baixo :

// 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'}
    };

Se você deseja ajustá-lo mais, tente alterar esses valores ou usar outras propriedades no link acima.


78

Estou muito atrasado, mas qualquer usuário que procure por isso pode obter ajuda. Dentro das opções, você pode passar um novo parâmetro chamado chartArea .

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

As opções esquerda e superior definirão a quantidade de preenchimento da esquerda e da parte superior. Espero que isso ajude.


o chartArea.top fez o truque para minha div de tamanho dinâmico. Obrigado.
Blamkin86

60

Cheguei aqui como a maioria das pessoas com esse mesmo problema e fiquei chocado que nenhuma das respostas funcionasse remotamente.

Para qualquer pessoa interessada, aqui está a solução real:

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

A chave aqui não tem nada a ver com os valores "esquerdo" ou "superior". Mas sim que o:

As dimensões do gráfico e da área do gráfico são SET e definidas como SAME VALUE

Como uma emenda à minha resposta. O que foi dito acima resolverá o problema "excessivo" de preenchimento / margem / espaço em branco. No entanto, se você deseja incluir etiquetas de eixos e / ou uma legenda, será necessário reduzir a altura e a largura da área do gráfico para algo ligeiramente abaixo da largura / altura externa. Isso "informará" a API do gráfico que há espaço suficiente para exibir essas propriedades. Caso contrário, ele será excluído com prazer.


2
Como uma emenda à minha resposta. Isso realmente resolverá o problema "excessivo" de preenchimento / margem / espaço em branco. No entanto, se você deseja incluir etiquetas de eixos e / ou uma legenda, será necessário reduzir a altura e a largura da área do gráfico para algo ligeiramente abaixo da largura / altura externa. Isso "informará" a API do gráfico que há espaço suficiente para exibir essas propriedades. Caso contrário, ele será excluído com prazer.
Pimbrouwers 29/05

1
Acho que o motivo pelo qual as outras soluções não funcionaram para você provavelmente é que elas assumiram que o gráfico estava sendo inserido em um DIV que já tinha atributos predefinidos de largura e altura, mas você não fez isso. É uma boa ideia predefinir a altura e a largura no HTML para que o layout da página não seja alterado quando o gráfico for preenchido. Isso impedirá que as coisas "pulem" na página enquanto ela é carregada.
Dave Burton

@ Dave obrigado pela sugestão, mas eu não necessariamente concordo. Existem muitas situações em que você simplesmente não sabe quais serão esses valores. E parece que pelo menos outras 15 pessoas sentem que minha oferta é adequada.
Pimbrouwers 30/03

1
Eu concordo, Pim. Quando você não conhece a largura e / ou a altura com antecedência (talvez porque queira que a página se adapte responsivamente), não é possível predefinir a largura e a altura no DIV. Eu estava apenas apontando por que acho que as soluções dadas nas outras respostas funcionaram para elas, mas não funcionaram para você, e por que é uma boa ideia predefinir a largura e a altura no DIV, se puder.
Dave Burton

1
Por razões apontadas pelo @DaveBurton, essa é provavelmente a resposta correta se estiver trabalhando com CSS Grid (que eu sou) #
6267 R Stephen R

14

Está faltando nos documentos (estou usando a versão 43), mas você pode realmente usar as propriedades direita e inferior da área do gráfico:

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

Portanto, é possível usar largura e altura responsivas completas e impedir que qualquer etiqueta ou legenda do eixo seja cortada.


Ser capaz de usar corretamente é definitivamente uma boa adição, no entanto, no caso de um gráfico de colunas que requer números para o eixo vertical, fica complicado quando os valores flutuam um pouco - por exemplo, um gráfico com valores que variam de 0 - 100 exigiria um valor esquerdo de 20 pixels, mas 0 - 10 mil precisaria de 100 pixels, e usar 100 pixels deixaria uma margem bastante grande, que é o que eu acho que todos nós estamos tentando nos livrar :) A menos que haja uma opção que permite que o gráfico ajuste sua própria largura que está faltando. Alguma idéia de como alguém pode resolver isso?
user3800174

Parece que eles o documentaram em 2 de outubro de 2015, aqui: archive.is/lwbQY#selection-2997.0-3011.1 #
Dave Burton #

13

Existe essa possibilidade, como Aman Virk mencionou :

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

Mas lembre-se de que o preenchimento e a margem não existem para incomodá-lo. Se você tiver a possibilidade de alternar entre diferentes tipos de gráficos, como um ColumnChart e aquele com colunas verticais, precisará de alguma margem para exibir os rótulos dessas linhas.

Se você tirar essa margem, acabará mostrando apenas uma parte dos rótulos ou nenhum rótulo.

Portanto, se você tiver apenas um tipo de gráfico, poderá alterar a margem e o preenchimento, como disse Arman. Mas se for possível mudar, não as altere.


11

Há um tema disponível especificamente para este

options: {
  theme: 'maximized'
}

dos documentos do gráfico do Google:

Atualmente, apenas um tema está disponível:

'maximizado' - maximiza a área do gráfico e desenha a legenda e todos os rótulos dentro da área do gráfico. Define as seguintes opções:

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

Esta parece ser a melhor opção. Depois de definir o tema: 'maximizado', ainda é possível ajustar a aparência, por exemplo, height: '90%', textPosition: 'out', etc.
Jiri Kriz
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.