Для создания функционала динамичной диаграммы мы будем использовать сообщения JavaScript для связи с компонентом HTML.
В этом примере показано, как использовать компонент HTML для встраивания диаграммы на страницу. Это лишь одна из многих вещей, которые вы можете встроить на свой сайт с помощью компонента HTML.
Описание функционала кода
Здесь мы встраиваем диаграмму Chart.js. Код HTML для диаграммы вводится в компонент HTML с помощью кнопки «Редактировать код». Страница и компонент HTML взаимодействуют друг с другом с помощью функций postMessage и onMessage. Когда страница загружается и каждый раз, когда с помощью раскрывающегося списка выбирается год, страница отправляет сообщение компоненту HTML с помощью функции postMessage.
Сообщение содержит значения для отображения на диаграмме. Компонент HTML получает сообщение, используя свою функцию onMessage, и соответствующим образом обновляет диаграмму. Когда пользователь щелкает столбец на диаграмме, компонент HTML отправляет сообщение на страницу, используя свою функцию postMessage. Сообщение содержит данные об элементе, по которому был сделан щелчок. Страница получает сообщение с помощью функции onMessage и отображает его содержимое пользователям с помощью текстового элемента под диаграммой.
Диаграмма основана на chartjs.org. Вы можете найти их репозиторий и лицензию на GitHub.
Как создать такой же код на своём сайте
Откройте этот пример в редакторе, чтобы работать с шаблоном.
Скопируйте код для "ГЛАВНАЯ"
let year = 2017;
let flights = {
2014: [6.3, 2.4, 7.6, 5.4, 9.9, 7.8],
2015: [6.7, 2.2, 11.2, 5.5, 10.1, 7.9],
2016: [7.2, 3.1, 8.2, 5.6, 9.2, 10.2],
2017: [7.4, 3.9, 8.8, 6.1, 8.7, 9.8]
};
$w.onReady(() =>{
$w("#html1").postMessage(flights[year]);
$w("#html1").onMessage((event)=>{
if(event.data.type === 'ready'){
$w("#html1").postMessage(flights[year]);
}
if(event.data.type === 'click'){
$w("#clickedMessage").text = `The number of flights to ${event.data.label} in ${year} is ${event.data.value} million.`;
$w("#clickedMessage").show();
}
});
});
export function year_onChange(event) {
year = $w('#year').value;
$w("#html1").postMessage(flights[year]);
}