谷歌柱形圖使其響應

美好的一天，我有一個谷歌專欄圖和工作完美，但當我重新調整我的瀏覽器大小列圖溢出，不會重新大小。我的網站是響應式的，我不想把這樣的條形圖。如何讓我的專欄圖響應？谷歌柱形圖使其響應

我得到這個柱形圖從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的問題在於它沒有響應功能。

通過Web，我找到並實施最佳的解決方案之前的探索是：

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

這段代碼調用drawChart()功能每次調整瀏覽器窗口的時間。因此，這意味着每次都重繪圖表。這可能不是最好的或有效的解決方案，但對我來說，它完成了這項工作。

爲了允許.resize()函數，您將需要jQuery庫。更多信息可在here。

來源

2016-06-16 12:52:56 RH7

谷歌柱形圖使其響應

回答

相關問題