단일 스크립트 사용:

또는 iframe을 사용하여:

스크립트를 사용할 때 컨테이너 식별자('div' id)를 지정할 수도 있습니다.

<div id='widget1' style='text-align: center'></div>

기본 통합은 간단하고 간단합니다. 먼저 다음 코드 부분을 추가해야 합니다.

<script  src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>

그런 다음 위젯을 포함하려면 다음 코드를 추가하세요.

'_waqiFeed' 함수는 위젯 구성을 인수로 사용합니다. 스테이션과 위젯 표시 스타일( size )만 정의하면 됩니다. 이것이 생산되는 것입니다:

위젯을 표시해야 하는 컨테이너 식별자('div' id)를 지정할 수도 있습니다.

<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>

size 매개변수를 다음 중 하나로 변경하여 표시 형식을 변경할 수 있습니다.

display 옵션을 지정하여 위젯 내에 표시될 텍스트를 사용자 정의할 수 있습니다. 예를 들어 텍스트 "AQI" 이름과 업데이트 시간(왼쪽 위젯에 표시됨)을 모두 표시하려면 다음 코드를 사용할 수 있습니다.

_waqiFeed({    
	display:"%cityname  AQI  is  <span  style='%style'>%impact  (%aqiv)</span>  <small>on  %date</small>",  
	station:"A373120"  
});  

매개변수 display 는 HTML 기반 문자열이며 다음 키워드 중 하나를 포함할 수 있습니다.

• 도시 이름은 `%cityname`(예: Beijing ),
• 장식된 AQI 값에 대한 `%aqi`(예: 58 ),
• 장식되지 않은(원시 텍스트) AQI 값(예: 58 )에 대한 `%aqiv`,
• 장식된 AQI 세부정보의 CSS 선언을 위한 `%style`(예: background-color: #ffde33;color:#000000; ),
• AQI가 업데이트된 시간에 대한 `%date`(예: Wed 20:00 ),
• 관련된 건강 영향에 대한 `%impact`(예: Good , Moderate ...)
• AQI 데이터 속성에 대한 `%attribution`(예: Beijing Environmental Protection Monitoring Center )
• 전체 AQI 세부정보에 대한 `%details`(AQI 값 위로 마우스를 이동할 때 표시되는 팝업 내용)

다음은 몇 가지 예입니다.

lang 옵션을 설정하여 사용할 언어를 지정할 수도 있습니다. 예를 들어, 중국어로 위젯을 포함하려면(오른쪽에 표시된 대로) 다음 코드를 사용하세요.

현재 지원되는 언어는 다음과 같습니다.

관련 코드를 보려면 아래 위젯 중 하나를 클릭하세요.