विंडो पर Google चार्ट redraw / scale आकार बदलता है

Question 1

मैं विंडो आकार बदलने पर एक Google linechart को कैसे पुनः तैयार / पुनर्विक्रय करूं?

Question 2

जब विंडो आकार पूरा होता है और कई ट्रिगर से बचने के लिए, मुझे लगता है कि एक घटना बनाना बेहतर है:

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data);
});

Question 3

Google द्वारा मूल कोड अंत में बस यही करता है:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

खिड़की के आकार बदलने पर आप इसे थोड़ी सी जावास्क्रिप्ट के साथ बदल सकते हैं:

function resize () {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

window.onload = resize;
window.onresize = resize;

Question 4

चूंकि window.resizeघटना प्रत्येक आकार की घटना पर कई बार आग लगाती है, मेरा मानना है कि सबसे अच्छा समाधान स्मार्टरेज़ का उपयोग करना है smartdraw()। जेएस और उपयोग । यह चार्ट redraw's प्रति की संख्या को सीमित करता है window.resize।

दिए गए js का उपयोग करके आप इसे केवल इस प्रकार कर सकते हैं:

// Instantiate and draw our user charts, passing in some options (as you probably were doing it)
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);

// And then:
$(window).smartresize(function () {
    chart.draw(data, options);
});

Question 5

यह सबसे सरल तरीका है जिससे मैं ब्राउज़र को बहुत अधिक तनाव पैदा किए बिना इसे करने से बाहर काम कर सकता हूं:

    var chart1 = "done";

$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});

चार्ट के पुनः लोड होने से पहले यह 1 सेकंड प्रतीक्षा करता है और इस प्रतीक्षा अवधि में फ़ंक्शन को फिर से कॉल नहीं करने देता है। जैसा कि विंडो के आकार बदलने वाले फ़ंक्शंस को कई बार कहा जाता है, जब भी आप विंडो का आकार बदलते हैं, तो यह फ़ंक्शन को वास्तव में केवल एक बार काम करने में मदद करता है, जब आप विंडो का आकार बदलते हैं, तो शेष कॉल, यदि कथन द्वारा रोक दी जाती हैं

आशा है कि ये आपकी मदद करेगा

Question 6

Google चार्ट्स को उत्तरदायी बनाने के लिए Google विज़ुअलाइज़ेशन API में कोई विकल्प नहीं है।

लेकिन हम विंडो चार्ट के रूप में Google चार्ट को उत्तरदायी बना सकते हैं । Google चार्ट को उत्तरदायी बनाने के लिए GITHub पर jQuery लाइब्रेरी उपलब्ध है - MIT लाइसेंस के तहत लाइसेंस प्राप्त jquery-smartresize , जिसमें विंडो आकार परिवर्तन पर ग्राफ़ का आकार बदलने की क्षमता है।

GitHub की इस परियोजना की दो स्क्रिप्ट फाइलें हैं: -

jquery.debouncedresize.js: adds a special event that fires once after the window
has been resized.

और

jquery.throttledresize.js: adds a special event that fires at a reduced rate (no 
more double events from Chrome and Safari).

यहां उत्तरदायी चार्ट के दो उदाहरण दिए गए हैं ...

हम चार्ट के वांछित पहलू अनुपात से मिलान करने के लिए visualization_wrap के निचले पैडिंग को बदल सकते हैं।

Calculate as Height / Width x 100
For a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25%
For a square it'd be 100%

हम यह सुनिश्चित करने के लिए Google चार्ट के चार्टरीया विकल्प को अनुकूलित कर सकते हैं कि लेबल आकार बदलने पर कट न जाएं ।

Question 7

Redraw / विंडो पर एक Google linechart का आकार बदलें

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

Question 8

मैं व्यक्तिगत रूप से निम्नलिखित दृष्टिकोण को पसंद करता हूं, अगर आप addEventListener का उपयोग करके रह सकते हैं, और IE <9 के लिए समर्थन की कमी नहीं है।

var windowResizeTimer;
window.addEventListener('resize', function(e){
    clearTimeout(windowResizeTimer);
    windowResizeTimer = setTimeout(function(){
        chart.draw(data, options);
    }, 750);
});

नोट setTimeout()और clearTimeout()750 मिली सेकेंड की देरी और कार्यों के उपयोग पर ध्यान दें , जिससे यह बहुत कम सघन हो जाता है जब कई त्वरित घटनाओं में त्वरित आग लग जाती है (जो कि माउस का उपयोग करते समय डेस्कटॉप पर ब्राउज़रों के लिए अक्सर होता है)।

Question 9

मैं दिनों तक एक ही चीज पर अटका रहा और मुझे पता चला कि एक घटना को जोड़ना सबसे अच्छा काम करता है।

window.addEventListener("resize", drawChart);

अपने फ़ंक्शन को घोषित करने के बाद बस इस पंक्ति को जोड़ें और यह ठीक काम करेगा।

अपने फ़ंक्शन के नाम के साथ drawChart बदलें।

Question 10

टियागो कास्त्रो के जवाब का उपयोग करते हुए , मैंने प्रदर्शन को दिखाने के लिए एक लाइन चार्ट लागू किया है।

google.load('visualization', '1', {
  packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Compute Time');
  data.addColumn('number', 'Compute Times');
  console.log("--");
  data.addRows([
    [0, 0, 0],
    [10, 10, 15],
    [20, 20, 65]
  ]);
  console.log(data);
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Nb Curves'
    },
    vAxis: {
      title: 'Time (ms)'
    },
    backgroundColor: '#f1f8e9'
  };

  function resize() {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  window.onload = resize();
  window.onresize = resize;

}

<script src='https://www.google.com/jsapi'></script>
<div id="chart_div">

स्निपेट का विस्तार करें