窗口宽度/高度的Div比例

Question

我创建了一个可以使用css和VW（视口宽度）完全调整大小的系统/网站。在该系统/网站中，我有一个与pixels一起使用的GoogleChart。现在我想用Javascript / jQuery / CSS（transform scale）来扩展图表。页面加载就足够了。

任何人都能帮助我找到正确的方向吗？

这是一个有问题的JSFiddle：https://jsfiddle.net/j9a9wpdj/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

[结论] 这对我有用：

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);
  })
});

工作示例：

＆＃13;

＆＃13;

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);
  })
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;