響應Google圖表的最佳做法

我有這個google chart on a my website。現在是散點圖，但我希望所有類型圖表的解決方案。例如，如果您使用700-px範圍的窗口加載站點，則圖表尺寸無法響應：圖表太寬。以下是我正在使用的代碼。響應Google圖表的最佳做法

你能幫我嗎？

感謝

HTML：

<div id="chart_div"></div>

CSS：

#chart_div { 
    width:100%; 
    height:20%; 
}

JS：

var options = { 
     title: 'Weight of pro surfer vs. Volume of his pro model', 
     hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55 
     vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40}, //20 
     legend: 'none', 
      width: '100%', 
      height: '100%', 
      colors: ['#000000'], 
      series: { 
        1: { color: '#06b4c8' }, 
       }, 
     legend: {position: 'top right', textStyle: {fontSize: 8}}, 
     chartArea: {width: '60%'}, 
      trendlines: { 0: {//type: 'exponential', 
        visibleInLegend: true, 
        color: 'grey', 
        lineWidth: 2, 
        opacity: 0.2, 
        labelInLegend: 'Linear trendline\n(Performance)' 
        } 
       } // Draw a trendline for data series 0. 
    }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));   
    chart.draw(data, options); 
    google.visualization.events.addListener(chart, 'ready', myReadyHandler()); 

    function myReadyHandler() { 
     chartDrawn.resolve();  }

編輯：看來，在div #chart_div有正確的大小（我的一個等用CSS），但這個div裏面的圖表不會調整其大小...保持鎖定與看到圖像： enter image description here

來源

2014-08-27 Louis

由於Visualization API的圖表沒有反應在所有的，你必須處理一切都在你自己的。通常，這意味着監聽窗口「調整大小」事件並重繪圖表，然後（在設置任何尺寸合適）：

function resize() { 
    // change dimensions if necessary 
    chart.draw(data, options); 
} 
if (window.addEventListener) { 
    window.addEventListener('resize', resize); 
} 
else { 
    window.attachEvent('onresize', resize); 
}

來源

2014-08-28 00:52:47 asgallant

謝謝您的回答，但現在我不是事件想着適應圖表大小時調整windown的大小，但只需在網站加載時正確設置即可，以便在頁面加載時正確獲取尺寸。 Resigin窗口將是下一步。你明白嗎？ – Louis 2014-08-28 09:55:23

如果您將CSS容器div的尺寸設置爲百分比，那麼圖表的大小將根據其容器的大小動態設置。 – asgallant 2014-08-28 12:32:47

這就是我的想法，這正是我正在做的事情：我已經用html更新了這個問題，所以你可以看到。例如，如果將寬度值從100％更改爲20％，則不會更改圖形的大小。你在這裏重複：http://boardlineapp.com/#faq – Louis 2014-08-28 14:45:27

-1

我發現這個代碼筆例子有用： Code pen example of Google Charts Responsive 他們做重繪窗口上的圖調整使用jQuery：

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

來源

2015-06-11 10:14:32 mzografski

這會非常快速地變得非常沉重，因爲它會觸發窗口調整大小的每個像素。你最好綁定到resize事件，並留下一個超時緩慢一點。 – Alex 2016-04-14 08:40:19

對於響應負載工作原理：

#chart_div { 
width:inherit; 
height:inherit; 
}

Altough忽略了最低會話期間屏幕大小發生變化時工作。

來源

2015-09-11 11:00:05

放寬度100％的圖表並調用調整大小功能如下

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

來源

2016-02-26 09:48:45

請給我們一些關於寬度應該放在哪裏（選項，CSS或其他任何地方）的細節，以及什麼'getShotHistory'對我們意味着什麼。該片段僅告訴我們不要再聽重新調整大小事件。 – Abdillah 2016-10-13 22:48:49

您必須將您自己的功能替換爲getShotHistory（）;.我創造了我自己的。您需要調用創建圖表功能的函數。（）函數（）{ yourChartFunction（）; }）; 您需要在chartChartFunction（）中提供100％的寬度; – 2016-10-23 13:10:52

我假設你正在使用bootstrap進行響應式設計。你需要把整個圖表div放到另一個div裏面，並加上col-sm-12 col-md-4，col-lg-4或者col-sm-12 col-md-6，col-lg-6等類。按照要求。 – 2016-10-23 13:15:54

一種更有效的調整大小代碼段低於和可重複使用的;

//bind a resizing function to the window 
$(window).resize(function() { 
    if(this.resizeTO) clearTimeout(this.resizeTO); 
    this.resizeTO = setTimeout(function() { 
     $(this).trigger('resizeEnd'); 
}, 500); 
}); 
//usage of resizeEnd 

$(window).bind('resizeEnd', function() { 
    DoSomething(); 
});

來源

2016-04-14 08:54:11 Alex

對我來說，以上都沒有工作，或者他們太複雜，我不能試一試。

我找到的解決方案很簡單，而且工作完美。它涉及到只是建立一個正常的谷歌圖表，在我的情況下是一個甜甜圈圖表，然後使用CSS來設計它。

@media screen and (max-width: 1080px) { 
    div#donutchart { 
     zoom:0.6; 
     margin-left:-16%; 
    } 
}

就是這樣。當然，你可以設置其他值的最大寬度，縮放和邊距，使你的圖表完美適合。我的圖表是800x600（you can see it here）。

來源

2016-08-29 15:35:06 Olaf

如果您使用的是Twitter Bootstrap，則自v3以來。2，您可以利用embed-responsive風格：

<div class="embed-responsive embed-responsive-16by9"> 
    <div id="chart_div" class="embed-responsive-item"></div> 
</div>

或者，如果你想4：3寬高比：

<div class="embed-responsive embed-responsive-4by3"> 
    <div id="chart_div" class="embed-responsive-item"></div> 
</div>

來源

2017-02-16 22:30:06

這似乎工作，你能指點我一些更多的技巧教程，我需要將它與一個響應式拼圖覆蓋和中心傳奇 – alex 2018-01-12 09:40:51

哦，應寬度是100％？ – alex 2018-01-12 09:50:50

@alex你會在哪裏使用100％？ – 2018-02-21 23:32:56

響應Google圖表的最佳做法

回答

相關問題