1

我正在使用screenfull.js来允许以全屏方式查看 Google 图表。

我希望图表在全屏模式下使用 100% 的屏幕宽度/高度，否则为特定大小（宽度：100%；高度：200 像素）。问题是我当前的代码导致在全屏模式下图表上方和下方出现黑条。我究竟做错了什么？

我的小提琴在这里

HTML：

<html>

  <body>

    <input type="button" value="Full Screen Mode" id="button1">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
    <script>


    </script>

    <div id="piechart" style="width: 100%; height: 200px;"></div>

  </body>

</html>

Javascript（改编谷歌饼图示例代码）：

$(function() {

  $('#button1').click(function() {

    screenfull.request(document.getElementById('piechart'));

  })

})


google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    title: 'My Daily Activities'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);

  $(window).resize(function() {
    chart.draw(data, options);

  });

}
4

1 回答 1

0

图表容器上的style属性需要在全屏模式下更改一次，
否则仍将是height: 200px;

让我们改用一个css类，然后我们可以监听screenfull的'change'事件，
并切换类名，然后重新绘制图表，以防万一 

  screenfull.on('change', function () {
    if (screenfull.isFullscreen) {
      chartContainer.className = 'chart-full';
    } else {
      chartContainer.className = 'chart-normal';
    }
    drawChart();
  });

接下来，默认情况下图表不会完全填满容器，
我们可以使用以下配置选项来最大化图表 

chartArea: {
  height: '100%',
  width: '100%',
  top: 48,
  left: 16,
  right: 16,
  bottom: 16
},
height: '100%',
width: '100%'

请参阅以下片段...

js 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    title: 'My Daily Activities',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,
      left: 16,
      right: 16,
      bottom: 16
    },
    height: '100%',
    width: '100%'
  };

  var chartContainer = $('#piechart').get(0);
  var chart = new google.visualization.PieChart(chartContainer);

  $('#button1').click(function() {
    if (screenfull.enabled) {
      screenfull.request(chartContainer);

      screenfull.on('change', function () {
        if (screenfull.isFullscreen) {
          chartContainer.className = 'chart-full';
        } else {
          chartContainer.className = 'chart-normal';
        }
        drawChart();
      });
    }
  })

  drawChart();
  $(window).resize(drawChart);

  function drawChart() {
    chart.draw(data, options);
  }
});

css 

.chart-normal {
  height: 200px;
}

.chart-full {
  height: 100%;
}

html 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" value="Full Screen Mode" id="button1">
<div class="chart-normal" id="piechart"></div>

工作小提琴-> https://jsfiddle.net/0m3x6aea/

于 2018-05-15T12:09:56.833 回答