Question

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

我希望图表在全屏模式下使用100％的屏幕宽度/高度，否则为特定尺寸（宽度：100％;高度：200px）。问题是我的当前代码在全屏模式下导致图表上方和下方的黑条。我做错了什么？

我的小提琴是here

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（适应Google饼图example code）：

$(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);

  });

}

Answer 1

图表容器上的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>

工作小提琴 - ＆gt; https://jsfiddle.net/0m3x6aea/

如何使用Screenfull.js全屏制作Google图表？

1 个答案: