Google विज़ुअलाइजेशन एनीमेशन जब चार्ट पहली बार लोड होता है

Question

मैं जानना चाहता हूं कि क्या मैं पहली बार चार्ट पर एनीमेशन लागू कर सकता हूं या नहीं?

और न केवल जब डेटा का परिवर्तन होता है?

धन्यवाद!

Answer 1

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

पर पहली बार पर एनीमेशन दिखाने में सक्षम होने के लिए, आप केवल खाली (कोई डेटा) चार्ट नहीं बना सकते हैं, और फिर डेटा एनीमेशन दिखाने के लिए चार्ट में अपना डेटा जोड़ सकते हैं।

var options = { 
    animation:{ 
    duration: 1000, 
    easing: 'out', 
    } 
}; 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'N'); 
data.addColumn('number', 'Value'); 
var chart = new google.visualization.ColumnChart... 
chart.draw(data, options); 
// Adding data 
data.addRow(['V', 200]); 

Answer 2

इस http://jsfiddle.net/h7mSQ/163/ जैसी कुछ कोशिश करें। ऐसा करने का तरीका चार्ट को शून्य मानों के साथ प्रस्तुत करना है और उसके बाद मूल्यों को आवश्यकतानुसार सेट करना और चार्ट को फिर से खींचना है। लंबवत अक्ष के लिए (इस उदाहरण में) के लिए न्यूनतम और अधिकतम मान सेट करना न भूलें।

function drawChart() { 
    var option = {title:"Yearly Coffee Consumption in our company", 
       width:600, height:400, 
       animation: {duration: 1000, easing: 'out',}, 
       vAxis: {title: "Cups of coffee", minValue:0, maxValue:500}, 
       hAxis: {title: "Year"}}; 
    var data = new google.visualization.DataTable();  
    data.addColumn('string', 'N'); 
    data.addColumn('number', 'Value'); 
    data.addRow(['2003', 0]); 
    data.addRow(['2004', 0]); 
    data.addRow(['2005', 0]); 
    // Create and draw the visualization. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
    chart.draw(data, option); 
    data.setValue(0, 1, 400); 
    data.setValue(1, 1, 300); 
    data.setValue(2, 1, 400); 
    chart.draw(data, option); 

} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

Answer 3

UPDATED उत्तर

गूगल चार्ट के विकल्प अपडेट और पहली बार यह ड्रॉ पर चार्ट चेतन करने के लिए विकल्प जोड़ा गया है।

var options = { 
      animation: { 
       duration: 1500, 
       startup: true //This is the new option 
      } 
     }; 

तो तुम न शुरुआत पर एक खाली चार्ट लोड करने के लिए है या किसी अन्य हैक करने के लिए:

तो केवल एक चीज आपको बस इतना करना है कि जैसे विकल्प में यह psecify है।

DEMO