диаграмма столбца google сделайте это responisve

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

Я получил эту гистограмму из 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>

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

источник

2016-01-28 MGB C

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

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

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

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

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

источник

2016-06-16 12:52:56 RH7

диаграмма столбца google сделайте это responisve

ответ

Смежные вопросы