javascript - 窗口宽度/高度的 Div 比例

Question

我制作了一个系统/网站，它可以使用 css 和 VW(视口(viewport)宽度)完全调整大小。在该系统/网站中，我有一个使用 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 {
	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>