javascript - Ta bort fyllning eller marginaler från Google Charts

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

Exempelfid

Hur tar jag bort utfyllnad eller marginaler i detta exempel?

Svar #1

Genom att lägga till och justera några konfigurationsalternativ som listas i API-dokumentationen kan du skapa många olika stilar. Till exempel, här är en version som tar bort det mesta av det extra tomma utrymmet genom att ställa in chartArea.width till 100% och chartArea.height till 80% och flytta legend.position till bottom:

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

Om du vill justera det mer, försök att ändra dessa värden eller använda andra egenskaper från länken ovan.

Svar #2

Jag är ganska sen men alla användare som söker efter detta kan få hjälp av det. Inom alternativen kan du skicka en ny parameter som kallas chartArea.

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

Alternativen för vänster och topp kommer att definiera mängden marginal från vänster och topp. Hoppas detta hjälper.

Svar #3

Jag kom hit som de flesta människor med samma problem, och lämnade chockad över att inget av svaren ens fungerade på avstånd.

För den som är intresserad, här är den faktiska lösningen:

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

Nyckeln här har ingenting att göra med värdena "vänster" eller "över". Utan snarare med att:

Dimensionerna för både diagrammet och diagramområdet är ANGIVNA och angivna till SAMMA VÄRDE

Som ett tillägg till mitt svar. Ovanstående kommer verkligen att lösa problemet med "överdriven" padding/marginal/blanksteg. Men om du vill inkludera axelrubriker och/eller en legend måste du minska höjden och bredden på diagramområdet till något strax under den yttre bredden/höjden. Detta kommer att "berätta" för diagram-API:et att det finns tillräckligt med utrymme för att visa dessa egenskaper. Annars kommer det glatt att utesluta dem.

Svar #4

Det saknas i dokumentationen (jag använder version 43), men du kan faktiskt använda höger och botten-egenskapen för diagramområdet:

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

Så det är möjligt att använda full responsiv bredd och höjd och förhindra att några axeltextetiketter eller förklaringar blir avskurna.

Svar #5

Det finns ett tema som är tillgängligt specifikt för detta

options: {
  theme: 'maximized'
}

från Googles diagramdokumentation:

För närvarande finns endast ett tema tillgängligt:

'maximerad' - Maximerar områdets storlek för diagrammet och ritar legenden samt alla etiketter inom diagramområdet. Ställer in följande alternativ:

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

Svar #6

Det finns denna möjlighet som Aman Virk nämnde:

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

Men kom ihåg att fyllningen och marginalen inte finns där för att störa dig. Om du har möjlighet att växla mellan olika typer av diagram som ett ColumnChart och det med vertikala kolumner behöver du lite marginal för att kunna visa etiketterna för dessa linjer.

Om du tar bort det där marginalen kommer du bara att visa en del av etiketterna eller inga etiketter alls.

Så om du bara har en typ av diagram kan du ändra marginalen och fyllningen som Arman sa. Men om det är möjligt att byta, ändra dem inte.

Relaterade artiklar