窗口寬度/高度上的div比例

Question

我製作了一個可以用css和VW（視口寬度）完全調整大小的系統/網站。在該系統/網站中，我有一個可與pixels一起使用的GoogleChart。現在我想用Javascript/jQuery/CSS來縮放圖表（transform scale）。在頁面加載就足夠了。

任何人都可以幫助我在正確的方向嗎？

這裏是與問題的jsfiddle：https://jsfiddle.net/j9a9wpdj/

 // Load the Visualization API and the corechart package. 
 
     google.charts.load('current', {'packages':['corechart']}); 
 

 
     // Set a callback to run when the Google Visualization API is loaded. 
 
     google.charts.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'); 
 
     data.addRows([ 
 
      ['Mushrooms', 3], 
 
      ['Onions', 1], 
 
      ['Olives', 1], 
 
      ['Zucchini', 1], 
 
      ['Pepperoni', 2] 
 
     ]); 
 

 
     // Set chart options 
 
     var options = {'title':'How Much Pizza I Ate Last Night', 
 
         'width': 400, 
 
         '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); 
 
     }

#test { 
 
\t width: 80vw; 
 
    height: 40vw; 
 
    background-color: #dcdcdc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <div id="test"> 
 

 
    <div id="chart_div"></div> 
 

 
</div>

[結論] 這對我來說是什麼在起作用：

function zoomit() { 
    $("#chart-wrapper").css('zoom', $(window).width()/$("#chart-wrapper").width()); 
} 
$(document).ready(zoomit); 
$(window).resize(zoomit); 

Answer 1

使用drawchart功能重繪圖表當窗口被調整大小時。根據需要在下面的功能中調整寬度和高度。 Updated fiddle

代碼添加到您的腳本：

var width = 400; 
var height = 300; 

// Set chart options 
var options = { 
    'title': 'How Much Pizza I Ate Last Night', 
    'width': width, 
    'height': height 
}; 

$(function() { 
    $(window).resize(function() { 
    width = $('#test').width(); 
    height = $('#test').height(); 
    google.charts.setOnLoadCallback(drawChart); 
    }) 
}); 

---

工作例如：

var width = 400; 
 
var height = 300; 
 

 
// Load the Visualization API and the corechart package. 
 
google.charts.load('current', { 
 
    'packages': ['corechart'] 
 
}); 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.charts.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'); 
 
    data.addRows([ 
 
    ['Mushrooms', 3], 
 
    ['Onions', 1], 
 
    ['Olives', 1], 
 
    ['Zucchini', 1], 
 
    ['Pepperoni', 2] 
 
    ]); 
 

 
    // Set chart options 
 
    var options = { 
 
    'title': 'How Much Pizza I Ate Last Night', 
 
    'width': width, 
 
    'height': height 
 
    }; 
 

 
    // Instantiate and draw our chart, passing in some options. 
 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
} 
 

 

 
$(function() { 
 
    $(window).resize(function() { 
 
    width = $('#test').width(); 
 
    height = $('#test').height(); 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    }) 
 
});

#test { 
 
    width: 80vw; 
 
    height: 40vw; 
 
    background-color: #dcdcdc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="test"> 
 

 
    <div id="chart_div"></div> 
 

 
</div>