Xóa phần đệm hoặc lề khỏi Biểu đồ của 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>

Ví dụ

Làm cách nào để loại bỏ phần đệm hoặc lề trong ví dụ này?

Bằng cách thêm và điều chỉnh một số tùy chọn cấu hình được liệt kê trong tài liệu API , bạn có thể tạo rất nhiều kiểu khác nhau. Ví dụ, đây là một phiên bản mà loại bỏ hầu hết các không gian trống thêm bằng cách thiết lập chartArea.widthđể 100% và chartArea.heightđến 80% và di chuyển legend.positionđến phía dưới :

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

Nếu bạn muốn điều chỉnh nó nhiều hơn, hãy thử thay đổi các giá trị này hoặc sử dụng các thuộc tính khác từ liên kết ở trên.

Tôi khá muộn nhưng bất kỳ người dùng nào đang tìm kiếm điều này đều có thể nhận được sự giúp đỡ từ nó. Bên trong các tùy chọn, bạn có thể truyền một tham số mới gọi là chartArea .

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

Tùy chọn bên trái và trên cùng sẽ xác định số lượng phần đệm từ bên trái và trên cùng. Hy vọng điều này sẽ giúp.

Tôi đến đây giống như hầu hết những người có cùng vấn đề này, và bị sốc khi không có câu trả lời nào thậm chí hoạt động từ xa.

Đối với bất cứ ai quan tâm, đây là giải pháp thực tế:

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

Khóa ở đây không liên quan gì đến các giá trị "bên trái" hoặc "trên cùng". Nhưng đúng hơn là:

Kích thước của cả biểu đồ và khu vực biểu đồ được THIẾT LẬP và được đặt thành GIÁ TRỊ CÙNG

Như một sửa đổi cho câu trả lời của tôi. Ở trên thực sự sẽ giải quyết vấn đề "quá mức" phần đệm / lề / khoảng trắng. Tuy nhiên, nếu bạn muốn bao gồm các nhãn trục và / hoặc chú giải, bạn sẽ cần giảm chiều cao và chiều rộng của khu vực biểu đồ để một cái gì đó hơi thấp hơn chiều rộng / chiều cao bên ngoài. Điều này sẽ "cho" API biểu đồ biết có đủ chỗ để hiển thị các thuộc tính này. Nếu không nó sẽ vui vẻ loại trừ chúng.

Nó bị thiếu trong các tài liệu (Tôi đang sử dụng phiên bản 43), nhưng bạn thực sự có thể sử dụng thuộc tính bên phải và bên dưới của khu vực biểu đồ:

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

Vì vậy, có thể sử dụng chiều rộng và chiều cao đáp ứng đầy đủ và ngăn bất kỳ nhãn trục hoặc truyền thuyết nào bị cắt.

Có khả năng này giống như Aman Virk đã đề cập :

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

Nhưng hãy nhớ rằng phần đệm và lề không có ở đó để làm phiền bạn. Nếu bạn có khả năng chuyển đổi giữa các loại biểu đồ khác nhau như Cột biểu đồ và loại có cột dọc thì bạn cần một số lề để hiển thị nhãn của các dòng đó.

Nếu bạn lấy đi phần lề đó thì cuối cùng bạn sẽ chỉ hiển thị một phần của nhãn hoặc không có nhãn nào cả.

Vì vậy, nếu bạn chỉ có một loại biểu đồ thì bạn có thể thay đổi lề và phần đệm như Arman đã nói. Nhưng nếu có thể chuyển đổi, đừng thay đổi chúng.

Có một chủ đề có sẵn đặc biệt cho việc này

options: {
  theme: 'maximized'
}

từ các tài liệu biểu đồ Google:

Hiện tại chỉ có một chủ đề có sẵn:

'Tối đa hóa' - Tối đa hóa diện tích của biểu đồ và vẽ huyền thoại và tất cả các nhãn bên trong khu vực biểu đồ. Đặt các tùy chọn sau:

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