Google विज़ुअलाइजेशन

के साथ .hide() और .show() का उपयोग करके मैंने Google विज़ुअलाइज़ेशन के साथ एक लाइन ग्राफ़ बनाया है। मैंने इसका परीक्षण किया है और यह अपेक्षा के अनुसार काम करता है। समस्या यह है कि जब मैं विज़ुअलाइज़ेशन पर .hide() के साथ पृष्ठ प्रारंभ करता हूं और फिर उसे दिखाने के लिए बटन क्लिक करता हूं, तो यह विज़ुअलाइज़ेशन प्रदर्शित नहीं करेगा। यहां मेरे पास एक कट ऑफ संस्करण है।Google विज़ुअलाइजेशन

<script language="JavaScript"> 
    $(document).ready(function(){ 
     $('#visualization').hide(); 
     $('#show').click(function() { 
      $('#visualization').show(); 
     }); 
     $('#hide').click(function() { 
      $('#visualization').hide(); 
     }); 

    }); 
// Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']}); 
// Begin Annoted Time Line Chart - 1 
     function drawVisualization() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Number of Users'); 
      //data.addColumn('string', 'title1'); 
      data.addRows(10); 
data.setValue(0, 0, new Date(2011, 11 ,1)); 
      data.setValue(0, 1, 21); 
      data.setValue(1, 0, new Date(2011, 11 ,2)); 
      data.setValue(1, 1, 24); 
// Do this for the rest of the chart 

... 
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
       document.getElementById('visualization')); 
      annotatedtimeline.draw(data, {'displayAnnotations': true}); 
     } 

     google.setOnLoadCallback(drawVisualization); 

</script> 
<body> 
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a> 
    <div style="border:solid"> 
       <div id="visualization" style="width: 100%; height: 400px;"></div> 
     </div> 
</body>

अगर मैं .hide() शुरुआत दिखाने के लिए 2 बटन और छिपाने काम ठीक है, लेकिन जब उसके शुरू में छिपा हुआ यह काम नहीं करता बाहर टिप्पणी। मैंने क्वेरी भाग के ऊपर विज़ुअलाइज़ेशन के लिए कोड डालने का प्रयास किया है लेकिन यह अभी भी काम नहीं करेगा।

कोई भी इसे ठीक करने के बारे में जानता है?

धन्यवाद,

क्रेग

संपादित

मैं इस setTimeout (function() { $ ('# टैब') का उपयोग करने में सक्षम था टैब();। // या छिपाना() }, 50); });

स्रोत

2011-12-20 craigtb

मैं इस कोड के बारे में विशेष रूप से पता नहीं है, लेकिन वहाँ कोड का पता लगाता है कि जब यह छिपा हुआ है और यह काम है जब ऐसी बात है ऐसा नहीं करता है। यह अक्सर दक्षता कारणों के लिए किया जाता है ताकि ऑब्जेक्ट छुपाए जाने पर बहुत सी CPU या स्मृति बर्बाद न हो। उस मुद्दे के आसपास काम करने के लिए, आपको इसे पहले के बजाय दृश्यमान बनाने के बाद इसे प्रस्तुत करना होगा। – jfriend00

एक छिपे तत्व में प्रस्तुत किए जाने पर Gviz ग्राफ गलत तरीके से प्रस्तुत किए जाएंगे (अक्सर बहुत छोटे/अदृश्य के करीब)। तत्व को दृश्यमान बनाने के बाद आपको ग्राफ को फिर से निकालना होगा।

ऐसा करने का एक सरल उदाहरण के लिए, अपने कोड के आधार पर, इस शो हैंडलर के कॉलबैक करने के लिए अपने ड्रॉ समारोह जोड़ने की तर्ज पर कुछ होगा:

$('#visualization').show(function() { 
    drawVisualization(); 
});

कॉलबैक शो एक बार निष्पादित किया जाएगा पूरा है।

स्रोत

2011-12-22 07:57:19 oli

मैंने उपरोक्त ओली द्वारा प्रदान की गई सलाह की कोशिश की है, लेकिन री-ड्राइंग क्रोम पर मेरे लिए काम नहीं कर सका।

मेरे लिए एक बेहतर तरीका निश्चित संख्या के साथ चार्ट में ऊंचाई और चौड़ाई को परिभाषित करना था। https://developers.google.com/chart/interactive/docs/gallery/bubblechart विकल्पों का वर्णन करता है।

मैं बस यह प्रयोग किया जाता है और यह काम करता है:

var options = { 
     title: '<%= t("views.participants.ranking.s23") %>', 
     colors:['#3f3f3f', '#199EDA'], 
     chartArea: {top: 30, left: 80, width: 490, height: 300}, 
     height: 500, 
     width: 710, 
     legend: {position: 'right', alignment: 'start'}, 
     sizeAxis: {maxSize: 20} 
     }

स्रोत

2013-03-31 14:58:57

Google विज़ुअलाइजेशन

उत्तर

संबंधित मुद्दे