Шкала Div на ширине окна/высоте

Question

Я создаю систему/веб-сайт, который полностью изменен с помощью css и VW (ширина видового экрана). В этой системе/веб-сайте у меня есть GoogleChart, который работает с pixels. Теперь я хочу масштабировать диаграмму с помощью 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>