ลบการขยายหรือระยะขอบออกจาก 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>

ตัวอย่างซอ

ฉันจะลบการขยายหรือระยะขอบในตัวอย่างนี้ได้อย่างไร

ด้วยการเพิ่มและปรับแต่งตัวเลือกการกำหนดค่าบางอย่างที่แสดงในเอกสาร 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

กุญแจที่นี่ไม่มีส่วนเกี่ยวข้องกับค่า "ซ้าย" หรือ "บนสุด" แต่ค่อนข้างที่:

ขนาดของแผนภูมิและพื้นที่แผนภูมิคือ SET และตั้งค่าเป็น SAME VALUE

เป็นการแก้ไขคำตอบของฉัน ข้างต้นแน่นอนจะแก้ปัญหาช่องว่างภายใน "มากเกินไป" / ขอบ / ช่องว่าง อย่างไรก็ตามหากคุณต้องการรวมป้ายชื่อแกนและ / หรือคำอธิบายแผนภูมิคุณจะต้องลดความสูง & ความกว้างของพื้นที่แผนภูมิดังนั้นบางอย่างที่ต่ำกว่าความกว้าง / ความสูงด้านนอกเล็กน้อย สิ่งนี้จะ "บอก" แผนภูมิ API ว่ามีห้องเพียงพอที่จะแสดงคุณสมบัติเหล่านี้ มิฉะนั้นจะแยกพวกเขาอย่างมีความสุข

มันหายไปในเอกสาร (ฉันใช้รุ่น 43) แต่คุณสามารถใช้คุณสมบัติด้านขวาและด้านล่างของพื้นที่แผนภูมิ:

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

ดังนั้นจึงเป็นไปได้ที่จะใช้ความกว้างและความสูงที่ตอบสนองได้เต็มที่และป้องกันไม่ให้เลเบลของแกนหรือตำนานถูกครอบตัด

มีความเป็นไปได้เช่นนี้ที่Aman Virk พูดถึง :

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

แต่โปรดจำไว้ว่าช่องว่างภายในและขอบไม่ได้รบกวนคุณ หากคุณมีความเป็นไปได้ที่จะสลับระหว่างชาร์ตประเภทต่าง ๆ เช่น ColumnChart และชาร์ตที่มีคอลัมน์แนวตั้งคุณจะต้องมีระยะขอบในการแสดงเลเบลของเส้นเหล่านั้น

หากคุณนำส่วนต่างนั้นไปทิ้งคุณจะพบว่ามีเพียงส่วนหนึ่งของป้ายกำกับหรือไม่มีป้ายกำกับเลย

ดังนั้นถ้าคุณมีแผนภูมิเพียงประเภทเดียวคุณก็สามารถเปลี่ยนระยะขอบและระยะห่างได้ตามที่ Arman กล่าว แต่ถ้าเป็นไปได้ที่จะเปลี่ยนไม่เปลี่ยน

มีชุดรูปแบบเฉพาะสำหรับสิ่งนี้

options: {
  theme: 'maximized'
}

จากเอกสารแผนภูมิของ Google:

ปัจจุบันมีเพียงหนึ่งธีมเท่านั้นที่มีให้:

'ขยายให้ใหญ่สุด' - ขยายพื้นที่ของแผนภูมิให้กว้างที่สุดและดึงเลเจนด์และเลเบลทั้งหมดภายในพื้นที่แผนภูมิ ตั้งค่าตัวเลือกต่อไปนี้:

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