Podstawowa integracja jest prosta i bezpośrednia. Najpierw musisz dodać następujący fragment kodu:

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

Następnie po prostu dodaj ten inny kod, aby dołączyć widżet:

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

Funkcja `_aqiFeed` przyjmuje jako argument blok konfiguracyjny widgetu. Parametr `container: "city-aqi-container"` odnosi się do identyfikatora tagu, w którym chcesz wstawić widget (np. `<span id='city-aqi-container'></span>`), oraz parametr city nazwa miasta, dla którego chcesz wyświetlić aktualny odczyt jakości powietrza (np. `miasto: „londyn”).

Możesz także określić używany język, ustawiając opcję lang . Na przykład, aby dołączyć widget w języku chińskim (jak pokazano po prawej), użyj następującego kodu:

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

Obecnie obsługiwane języki to:

Istnieje możliwość dostosowania tekstu wyświetlanego w widżecie poprzez określenie opcji display . Na przykład, aby wyświetlić zarówno tekstową nazwę „AQI”, jak i czas aktualizacji (jak pokazano na widżecie po lewej stronie), możesz użyć następującego kodu:

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

display parametr jest ciągiem opartym na formacie HTML i może zawierać dowolne z następujących słów kluczowych:

• `%cityname` dla nazwy miasta (np. Beijing ),
• `%aqi` dla udekorowanej wartości AQI (np. 58 ),
• `%aqiv` dla niedekorowanej (surowego tekstu) wartości AQI (np. 58 ),
• `%style` dla deklaracji css dekorowanych szczegółów AQI (np. background-color: #ffde33;color:#000000; ),
• `%data` oznacza czas aktualizacji AQI (np. Wed 20:00 ),
• „%wpływ” dla powiązanego wpływu na zdrowie (np. Good , Moderate ...)
• „% przypisania” dla przypisania danych AQI (np. Beijing Environmental Protection Monitoring Center )
• `%details` dla pełnych szczegółów AQI (zawartość wyskakującego okienka wyświetlanego po najechaniu myszką na wartość AQI).

Oto kilka przykładów:

Jeśli wolisz integrację samodzielnie, możesz także określić wywołanie zwrotne funkcji JavaScript, które będzie wykonywane podczas ładowania danych. Wystarczy dodać opcję callback w bloku parametrów, taką jak na przykład:

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

Na przykład, zakładając, że używasz również jquery, następujący kod:

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

wygeneruje następującą treść:

Obiekty aqi zawierają wszystkie słowa kluczowe wymienione w sekcji C (format wyświetlania).

Możliwe jest umieszczenie wielu widżetów na jednej stronie. Wszystko, czego potrzebujesz, to przekazać do funkcji `_aqiFeed` tablicę ze wszystkimi widżetami, które musisz uwzględnić. Na przykład, aby wstawić Londyn, Paryż i Nowy Jork, możesz użyć tego kodu:

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

Ten kanał widżetów jest udostępniany bezpłatnie i wyłącznie w celu integracji kanału z innymi stronami internetowymi (tzn. z wyłączeniem aplikacji) oraz pod warunkiem rozsądnego i akceptowalnego użycia. Zastrzegamy sobie prawo do zmiany struktury pliku danych (formatu danych) w dowolnym momencie i bez wcześniejszego powiadomienia, dlatego jeśli planujesz niestandardową integrację, lepiej się z nami skontaktować.

Podczas integracji należy kierować się kilkoma zasadami deontologicznymi , korzystając z źródła danych:

• Po pierwsze, zawsze upewnij się, że obecne jest przypisanie do pochodzenia EPA. Wszystkie dane dotyczące jakości powietrza, które można znaleźć w projekcie Światowego Indeksu Jakości Powietrza, powstały dzięki ciężkiej pracy wszystkich agencji EPA na całym świecie, dlatego też pamiętaj o podaniu informacji o ich pracy. Jeśli korzystasz z programowego API, atrybucja jest dostępna w polu attribution .
• Jeśli jesteś z instytucji i korzystasz z danych, prosimy o okazanie szacunku i oddanie punktów za naszą pracę. Jeśli próbujesz usunąć plik danych, pamiętaj, że ten projekt opiera się na projektach sponsorskich i współpracy, więc rozważ wsparcie nas , zamiast nas usuwać, szczególnie jeśli jesteś instytucją lub uniwersytetem na dużą skalę.
• W rzeczywistości nie zachowujcie się jak WRI ( World Resource Institute ): wyrzucenie całego źródła danych projektu Światowego Indeksu Jakości Powietrza i bycie tak tanimi, że nawet nie podaliby żadnego przypisu naszej pracy, i to pomimo ich 80 miliony dolarów rocznie. Nie wierzysz nam? Sprawdź tę migawkę .

To jest pierwsza wersja nowego interfejsu API kanału widżetów. W przygotowaniu jest już sporo ulepszeń, takich jak regulowana szerokość i wysokość grafiki, możliwość wyboru skali AQI itp. Jeśli chcesz zasugerować inne konkretne ulepszenia, wyślij nam wiadomość.