Колонка гугл заставляет это отвечать

Добрый день, у меня есть гистограмма гугл и я работаю отлично, но когда я изменяю размер моего браузера, гистограмма переполняется и не меняет размер. мой сайт отзывчив, и я не хочу ставить свою гистограмму таким образом. как получить мою диаграмму столбца отзывчивым?

Я получил эту диаграмму столбцов от developers.google.com/chart/interactive/docs/gallery/columnchart

вот код

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title><?php echo $title;?></title>
    <!-- Load Google chart api -->

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
            google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);
    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'vertical',
      vAxis: {format: 'decimal'},
      height: 400,
      colors: ['#1b9e77', '#d95f02', '#7570b3']
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));

    var btns = document.getElementById('btn-group');

    btns.onclick = function (e) {

      if (e.target.tagName === 'BUTTON') {
        options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    }
  }
    </script>
 </head>
 <body>        

   <div id="chart_div" style="width:100%;"></div>
 <br/>
<div id="btn-group">
  <button class="button button-blue" id="none">No Format</button>
  <button class="button button-blue" id="scientific">Scientific Notation</button>
  <button class="button button-blue" id="decimal">Decimal</button>
  <button class="button button-blue" id="short">Short</button>
 </div>
 </body>
 </html>

Я также попытался добавить width="100%" из div, но это не работает вообще.

Источник

1 ответ

Решение

В настоящее время проблема с Google Charts заключается в том, что он не имеет адаптивной функции.

Из предыдущих исследований в Интернете лучшим решением, которое я нашел и реализовал, было:

$(window).resize(function () {
    drawChart();
});

Этот кусок кода вызывает drawChart() функция каждый раз, когда окно браузера изменяется. Следовательно, это означает, что диаграмма перерисовывается каждый раз. Возможно, это не самое лучшее или эффективное решение, но для меня оно сделало свою работу.

Для того, чтобы позволить .resize() функция, вам потребуется библиотека jQuery. Более подробная информация об этом доступна здесь.

Источник
Другие вопросы по тегам