Как я могу использовать Screenfull.js, чтобы сделать диаграмму Google полноэкранной? - PullRequest
Новая
       7

Как я могу использовать Screenfull.js, чтобы сделать диаграмму Google полноэкранной?

0 голосов
/ 15 мая 2018

Я использую 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 (который адаптирует круговую диаграмму Google пример кода ): 

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

  });

}

1 Ответ

0 голосов
/ 15 мая 2018

атрибут style в контейнере диаграммы нужно будет изменить один раз в полноэкранном режиме,
, иначе он все равно будет height: 200px;

. Вместо этого мы будем использовать класс css, тогда мыможет прослушать событие 'change' screenfull,
и переключить имя класса, затем заново нарисовать диаграмму, просто чтобы быть в безопасности 

  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/

...