Η βασική ενσωμάτωση είναι απλή και απλή. Πρώτα πρέπει να προσθέσετε το ακόλουθο κομμάτι κώδικα:

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

Στη συνέχεια, απλώς προσθέστε αυτόν τον άλλο κωδικό για να συμπεριλάβετε το γραφικό στοιχείο:

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

Η συνάρτηση `_aqiFeed` παίρνει ως όρισμα το μπλοκ διαμόρφωσης για το γραφικό στοιχείο. Η παράμετρος `container: "city-aqi-container"` αναφέρεται στο αναγνωριστικό της ετικέτας στην οποία θέλετε να εισαγάγετε το γραφικό στοιχείο (π.χ. `<span id='city-aqi-container'></span>`), και η παράμετρος city το όνομα της πόλης για την οποία θέλετε να εμφανίζεται η τρέχουσα ένδειξη ποιότητας αέρα (π.χ. `πόλη: "λονδίνο").

Μπορείτε επίσης να καθορίσετε τη γλώσσα που θα χρησιμοποιηθεί ορίζοντας την επιλογή lang . Για παράδειγμα, για να συμπεριλάβετε το γραφικό στοιχείο στα κινέζικα (όπως φαίνεται στα δεξιά), χρησιμοποιήστε τον ακόλουθο κώδικα:

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

Οι γλώσσες που υποστηρίζονται αυτήν τη στιγμή είναι:

Είναι δυνατό να προσαρμόσετε το κείμενο που θα εμφανίζεται μέσα στο widget καθορίζοντας την επιλογή display . Για παράδειγμα, για να εμφανιστεί τόσο με το κείμενο "AQI" όνομα καθώς και με τον χρόνο ενημέρωσης (όπως φαίνεται στο γραφικό στοιχείο στα αριστερά), μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

Η display παραμέτρων είναι μια συμβολοσειρά που βασίζεται σε HTML και μπορεί να περιέχει οποιαδήποτε από τις ακόλουθες λέξεις-κλειδιά:

• «%cityname» για το όνομα της πόλης (π.χ. Beijing ),
• `%aqi` για τη διακοσμημένη τιμή AQI (π.χ. 58 ),
• `%aqiv` για την τιμή AQI χωρίς διακόσμηση (ακατέργαστο κείμενο) (π.χ. 58 ),
• `%style` για τη δήλωση css των διακοσμημένων λεπτομερειών AQI (π.χ. background-color: #ffde33;color:#000000; ),
• `%date` για την ώρα κατά την οποία ενημερώθηκε το AQI (π.χ. Wed 20:00 ),
• «%impact» για τον σχετικό αντίκτυπο στην υγεία (π.χ. Good , Moderate ...)
• `%attribution` για την απόδοση δεδομένων AQI (π.χ. Beijing Environmental Protection Monitoring Center )
• `%details` για τις πλήρεις λεπτομέρειες AQI (το περιεχόμενο του αναδυόμενου παραθύρου που εμφανίζεται όταν μετακινείτε το ποντίκι πάνω από την τιμή AQI).

Ακολουθούν μερικά παραδείγματα:

Εάν προτιμάτε την ενσωμάτωση DIY, μπορείτε επίσης να καθορίσετε μια συνάρτηση javascript που θα γίνεται κατά τη φόρτωση των δεδομένων. Απλώς πρέπει να προσθέσετε την επιλογή callback στο μπλοκ παραμέτρων, όπως για παράδειγμα:

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

Για παράδειγμα, υποθέτοντας ότι χρησιμοποιείτε επίσης jquery, ο ακόλουθος κώδικας:

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

θα παράγει το ακόλουθο περιεχόμενο:

Τα αντικείμενα aqi περιέχουν όλες τις λέξεις-κλειδιά που αναφέρονται στην ενότητα Γ (μορφή εμφάνισης).

Είναι δυνατή η συμπερίληψη πολλών γραφικών στοιχείων σε μία σελίδα. Το μόνο που χρειάζεστε είναι να περάσετε στη συνάρτηση `_aqiFeed` έναν πίνακα με όλα τα γραφικά στοιχεία που πρέπει να συμπεριλάβετε. Για παράδειγμα, για να εισαγάγετε το Λονδίνο, το Παρίσι και τη Νέα Υόρκη, μπορείτε να χρησιμοποιήσετε αυτόν τον κωδικό:

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

Αυτή η ροή γραφικών στοιχείων παρέχεται δωρεάν και με μοναδικό σκοπό την ενσωμάτωση της ροής σε άλλους ιστότοπους (δηλαδή οι εφαρμογές εξαιρούνται) και υπό την προϋπόθεση της λογικής και αποδεκτής χρήσης. Διατηρούμε το δικαίωμα να αλλάξουμε τη δομή της ροής δεδομένων (μορφή δεδομένων) ανά πάσα στιγμή και χωρίς προηγούμενη ειδοποίηση, επομένως καλύτερα να επικοινωνήσετε μαζί μας εάν σκοπεύετε να κάνετε μια προσαρμοσμένη ενσωμάτωση.

Κατά την ενσωμάτωση, υπάρχουν λίγοι δεοντολογικοί κανόνες που πρέπει να εφαρμόζονται κατά τη χρήση της τροφοδοσίας δεδομένων:

• Πρώτον, βεβαιωθείτε πάντα ότι υπάρχει η απόδοση στην αρχική EPA. Όλα τα δεδομένα για την ποιότητα του αέρα που μπορείτε να βρείτε στο έργο World Air Quality Index είναι χάρη στη σκληρή δουλειά όλων των EPA σε όλο τον κόσμο, επομένως φροντίστε να παρέχετε την αναφορά και για το έργο τους. Εάν χρησιμοποιείτε το API μέσω προγραμματισμού, η απόδοση είναι διαθέσιμη από το πεδίο attribution .
• Εάν προέρχεστε από ένα ίδρυμα και χρησιμοποιείτε τα δεδομένα, παρακαλούμε, δείξτε σεβασμό και επιστρέψτε τις πιστώσεις για το έργο μας. Εάν προσπαθείτε να διαγράψετε τη ροή δεδομένων, λάβετε υπόψη ότι αυτό το έργο βασίζεται σε έργα χορηγίας και συνεργασίας, επομένως σκεφτείτε να μας υποστηρίξετε αντί να μας διαγράψετε, ειδικά εάν είστε ίδρυμα ή πανεπιστήμιο μεγάλης κλίμακας.
• Στην πραγματικότητα, μην ενεργείτε όπως το WRI ( Παγκόσμιο Ινστιτούτο Πόρων ): Καταργώντας τη συνολική ροή δεδομένων του έργου World Air Quality Index και είναι τόσο φθηνά που δεν θα έδιναν καν καμία απόδοση για την εργασία μας, και αυτό παρά τα 80 εκατομμύρια ετήσιες χρηματοδοτήσεις σε δολάρια ΗΠΑ. Δεν μας πιστεύετε; Ελέγξτε αυτό το στιγμιότυπο .

Αυτή είναι η πρώτη έκδοση αυτού του νέου API ροής γραφικών στοιχείων. Υπάρχουν ήδη αρκετές βελτιώσεις στο στάδιο, όπως ρυθμιζόμενο πλάτος και ύψος γραφικών, επιλέξιμη κλίμακα AQI κ.λπ. Αν θέλετε να προτείνετε κάποια άλλη συγκεκριμένη βελτίωση, μη διστάσετε να μας στείλετε ένα μήνυμα.