खिड़की का आकार बदलने पर Google चार्ट रीड्रा/स्केल

Question

मैं विंडो आकार बदलने पर Google लाइनचार्ट को फिर से/पुन: सहेज सकता हूं?

Answer 1

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

//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); 
}); 

Answer 2

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

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; 

Answer 3

को पुन: आरेखित/rescale एक गूगल विंडो आकार बदलने पर लाइनचार्ट:

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

Answer 4

चूंकि window.resize घटना आग लगती है प्रत्येक आकार बदलने की घटना पर कई बार, मेरा मानना ​​है कि सबसे अच्छा समाधान smartresize.js का उपयोग करना है और smartdraw() का उपयोग करना है। यह चार्ट रेड्रा की प्रति 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); 
}); 

Answer 5

यह सबसे आसान तरीका मैं सर्वर से बहुत अधिक तनाव पैदा करने के बिना ऐसा करने का काम कर सकते हैं है:

var chart1 = "done"; 

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

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

मुझे आशा है कि इस मदद करता है

Answer 6

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

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

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). 

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

1. Responsive Google Pie Chart
-:

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

2. Responsive Google Bar Chart

हम चार्ट के वांछित पहलू अनुपात से मिलान करने के 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 चार्ट की chartarea विकल्प अनुकूलित कर सकते हैं।

Answer 7

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

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

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

Answer 8

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

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">