如何讓我的圖表成爲Bootstrap響應？響應谷歌分析圖表

這裏你可以看到，他們都不適當調整

enter image description here

我已經嘗試設置width至100％，但它似乎並沒有跟隨...

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart); 
    var chart, data, options; 
    function drawChart() { 
     data = google.visualization.arrayToDataTable([ 
       ['Day', 'Views', 'Visits', 'Bounces'], 
       <?php 
        foreach($rArr as $key => $value){ 
         echo '["'.$key.'", '.$this->DefaultNumber($value[0]).', '.$this->DefaultNumber($value[1]).', '.$this->DefaultNumber($value[2]).'],'; 
        } 
       ?> 
      ]); 
     options = { 
       width: '100%', 
       height: <?php echo $height; ?>, 
       title: '<?php echo $this->initialstartdate; ?><?php echo ' - '.$this->initialenddate; ?>', 
       titleTextStyle: {color: 'black', fontName: 'Calibri', 
         fontSize: '14'}, 
       colors:['#333','#999', '#ccc'], 
       backgroundColor: {fill: '#F5F5F5', opacity: 100}, 
       areaOpacity: 0.1, 
       hAxis: {textPosition: 'in', 
        showTextEvery: <?php echo $dateGap; ?>, 
        slantedText: false, 
        textStyle: {color: 'black', fontName: 'Calibri', 
         fontSize: '12'}}, 
       vAxis: {textStyle: {color: 'black', fontName: 'Calibri', 
         fontSize: '12'}}, 
       pointSize: 5, 
       legend: { position: 'bottom',textStyle: {color: 'black', fontName: 'Calibri', 
         fontSize: '12'}}, 
       isStacked: false 
      }; 
     chart = new google.visualization.AreaChart(document.getElementById('<?php echo $divId; ?>')); 
     chart.draw(data, options); 
    } 
    </script>

封裝代碼

<div class="well"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <h4>Visits vs. Views vs. Bounces</h4> 
      <div id="v-chart"></div> 
     </div> 
    </div> 
</div>

來源

2014-01-08 Kevin

我最初認爲通過添加一個類'.block {display：block;}'可以做到這一點......以及爲父容器添加高度......但沒有骰子 – Kevin

你碰巧擁有一個我們合作的工作演示？我們不能用您提供的代碼 –

創建一個，但我不知道。它將進入我正在構建的CMS，所以它目前受密碼保護，等等...今晚或明天，我會爲他們設置一個「測試」頁面，儘管 – Kevin

你需要做什麼爲t o重繪Google可視化。在drawChart函數的末尾添加以下行。

window.onresize = function(){chart.draw(data, options);};

我還繪製圖表時不使用width和height屬性。我只是省略它們，圖表將被縮放以適合你的目標div，所以你只需要使用css正確地縮放div。如果div改變大小，你仍然需要重繪。

例

Here is an example of this working。嘗試打開它並調整窗口大小。圖表應重新繪製並更新其大小以覆蓋所有窗口。

來源

2014-01-20 16:28:25 Eduardo

謝謝。我會在幾天內給這個鏡頭 – Kevin

我認爲這只是在那裏。然而，window.onresize似乎並沒有被觸發（至少不是所有的柱面）。如果我調整瀏覽器的大小，沒有任何反應，但是，現在當我刷新頁面時，圖形將被調整大小。 – Kevin

從你描述的這個看起來不太好。我在我的答案中添加了一個例子。 – Eduardo

響應谷歌分析圖表

封裝代碼

回答

相關問題