Использование одного скрипта:

Или используя iframe:

Вы также можете указать идентификатор контейнера (id 'div') при использовании скрипта:

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

Базовая интеграция проста и понятна. Сначала вам нужно добавить следующий фрагмент кода:

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

Затем просто добавьте этот другой код, чтобы включить виджет:

Функция _waqiFeed принимает в качестве аргумента конфигурацию виджета. Вам просто нужно определить станцию и стиль отображения виджета ( size ). Вот что получается:

Вы также можете указать идентификатор контейнера (id 'div'), в котором должен отображаться виджет:

<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 ),
• `%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).

Вот несколько примеров:

Вы также можете указать используемый язык, установив параметр lang . Например, чтобы включить виджет на китайском языке (как показано справа), используйте следующий код:

В настоящее время поддерживаются следующие языки:

Нажмите на любой из виджетов ниже, чтобы увидеть соответствующий код: