空氣品質小部件 - 新改進的來源
Air Quality Widget - New Improved Feed

Posted on July 28th 2015
分享: aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/hk/
{ widget : feed }

為了改善 AQI 小部件與外部網站的集成,我們開發了新的小部件 API 來源。與現有的小部件提要相比,這個新的 API 提要為整合提供了更大的靈活性,而且還提供了更多自訂小工具外觀的選項。

You can, for instance, display a tiny widget as simple as ... (move your mouse over the AQI number in order view the details), or a larger widget with details about the past 24 hours pollutants as shown on the right.

新框架還支援模板、多種語言(英語、簡體中文、繁體中文、西班牙語等)以及與基於資料的 JavaScript 回調進行程式設計整合的可能性。

A. 基本設定

基本整合簡單而直接。首先需要加入以下程式碼:

  
<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"` 是指要插入小部件的標籤的 id(例如 `<span id='city-aqi-container'></span>`),參數city是您若要顯示目前空氣品質讀數的城市的名稱(例如`city:「london」`)。

B. 指定語言

...

您也可以透過設定lang選項來指定要使用的語言。例如,要包含中文小工具(如右圖所示),請使用下列程式碼:

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

目前支援的語言有:

  • "en": 英語
  • "cn": 簡體中文
  • "jp": 日本
  • "es": 西班牙人
  • "kr": 韓國
  • "ru": 俄
  • "hk": 繁體中文
  • "fr": 法國人
  • "pl": Polish
  • "de": German
  • "pt": Portuguese
  • "vn": Vietnamese
  • "it": Italian
  • "id": Indonesian
  • "nl": Dutch
  • "fa": Persian
  • "th": Thai
  • "hu": Hungarian
  • "el": Greek
  • "ro": Romanian
  • "bg": Bulgarian
  • "ur": Urdu
  • "hi": Hindi
  • "ar": Arabic
  • "sr": Serbian
  • "bn": Bangla
  • "hu": Hungarian
  • "bs": Bosnian
  • "hr": Croatian

    如果未指定或設定為null ,則使用英文。

  • C. 指定顯示格式

    ...

    可以透過指定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` 用於裝飾 AQI 詳細資訊的 css 宣告(例如background-color: #ffde33;color:#000000; ),
    • `%date` 表示 AQI 更新的時間(例如Wed 20:00 ),
    • `%impact` 表示相關的健康影響(例如GoodModerate ...)
    • 「%attribution」為AQI資料歸屬(如Beijing Environmental Protection Monitoring Center
    • `%details` 查看完整的 AQI 詳細資訊(將滑鼠移到 AQI 值上時顯示的彈出視窗內容)。

    這裡有一些例子:

    Display Configuration Result

    D. 程式回調

    如果您喜歡 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物件包含 C 部分(顯示格式)中提到的所有關鍵字。

    E. 包括多個小部件

    可以在單一頁面中包含多個小工具。您所需要的只是將包含您需要包含的所有小部件的陣列傳遞給“_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>"));  
    }  
    
    The result is:

    F、飼料用量

    此小部件提要免費提供,其唯一目的是將提要整合到其他網站(即不包括應用程式),並且是在合理且可接受的使用條件下進行的。我們保留隨時更改提要結構(資料格式)的權利,恕不另行通知,因此如果您計劃進行自訂集成,最好與我們聯繫。

    在進行整合時,使用資料來源時應應用一些義務論規則:

    • 首先,始終確保原始 EPA 的歸屬資訊存在。您可以在世界空氣品質指數項目中找到的所有空氣品質數據都歸功於世界各地所有 EPA 的辛勤工作,因此請確保也提供他們工作的歸屬。如果您使用程式設計 API,則可從attribution欄位取得歸因。
    • 如果您來自機構並使用這些數據,請表示尊重並償還我們工作的積分。如果您正在嘗試抓取資料來源,請記住該項目依賴贊助和合作項目,因此請考慮支持我們而不是廢棄我們,特別是如果您是大型機構或大學。
    • 事實上,不要像WRI世界資源研究所)那樣行事:廢棄整個世界空氣品質指數計畫資料來源,而且價格如此低廉,以至於他們甚至不會對我們的工作給予任何歸屬,儘管他們有 80每年數百萬美元的資金。不相信我們?檢查這個快照

    G. 未來的改進

    這是這個新的小工具提要 API 的第一個版本。目前已有相當多的改進正在醞釀中,例如可調節圖形寬度和高度、可選擇的 AQI 比例等。如果您想提出任何其他具體改進建議,請隨時向我們發送訊息。

    按一下此處查看所有常見問題解答條目
  • AQI Scale: What do the colors and numbers mean?
  • Using Statistical Distances for Real-time Sensor Networks Validation
  • Nitrogen Dioxyde (NO2) in our atmosphere
  • 關於空氣質量與空氣污染指數

    本網站採用的污染指數和顏色與EPA是完全相同的。 EPA的指數可以從 AirNow上查到

    空气质量指数空气质量指数级别(状况)及表示颜色对健康影响情况建议采取的措施
    0 - 50一级(优)空气质量令人满意,基本无空气污染各类人群可正常活动
    51 -100二级(良)空气质量可接受,但某些污染物可能对极少数异常敏感人群健康有较弱影响极少数异常敏感人群应减少户外活动
    101-150三级(轻度污染)易感人群症状有轻度加剧,健康人群出现刺激症状儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼
    151-200四级(中度污染)进一步加剧易感人群症状,可能对健康人群心脏、呼吸系统有影响儿童、老年人及心脏病、呼吸系统疾病患者避免长时间、高强度的户外锻炼,一般人群适量减少户外运动
    201-300五级(重度污染)心脏病和肺病患者症状显著加剧,运动耐受力降低,健康人群普遍出现症状儿童、老年人及心脏病、肺病患者应停留在室内,停止户外运动,一般人群减少户外运动
    300+六级(严重污染)健康人群运动耐受力降低,有明显强烈症状,提前出现某些疾病儿童、老年人和病人应停留在室内,避免体力消耗,一般人群避免户外活动
    (参考详见http://zh.wikipedia.org/wiki/空气质量指数)

    如果你想了解更多有關空氣質量與污染,詳見維基百科或者 AirNow

    有關健康建議詳​​見北京的Richard Saint Cyr MD醫生的博客:www.myhealthbeijing.com


    注意事項: 所有空氣品質數據在發佈時均未經驗證,且為了確保資料準確性,這些數據可能隨時被修改,恕不另行通知。 世界空氣品質指數專案在編制這些訊息內容時已經謹慎的運用了所有適當的技巧,在任何情況下世界空氣品質指數 在任何情況下,世界空氣品質指數專案團隊或其代理人均不對因提供此數據而直接或間接引起的任何損失、傷害或損害來承擔契約、侵權或其他責任。



    設定


    選擇語言:


    Temperature unit:
    Celcius