Я подаю элемент HTML (круговую диаграмму) на странице wix. Я извлекаю данные из локального хранилища для 7 переменных и передаю информацию в элемент HTML через Postmessage.
Мой код работает нормально, когда он является частью кнопки (функция экспорта). Однако я хотел бы вызвать событие из функции onReady (т.е. при загрузке страницы). Я использую точно такой же код, но он просто не работает с функцией OnReady (т.е. я не могу вызвать событие программно).
Код страницы Wix для функции экспорта с кнопкой (работает нормально):
export function button1_click(event) {
var data = [introdeo, intcalypso, intbalthazar, intluna, intkiara, intmistral, intsaya];
console.log(data);
var labels = ["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"];
let info = {data:data, labels:labels};
$w("#html1").postMessage(info);
}
Код страницы Wix для функции onReady (не работает):
$w.onReady(function () {
var data = [introdeo, intcalypso, intbalthazar, intluna, intkiara, intmistral, intsaya];
var labels = ["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"];
let info = {data:data, labels:labels};
$w("#html1").postMessage(info);
} );
HTML-код (код диаграммы в элементе HTML на странице wix):
<!DOCTYPE html>
<html lang="en-US">
<body>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx,{
type: 'pie',
data: {
labels:[],
datasets: [{
data: [],
backgroundColor: ["#f97a03", "#52aff0", "#35a11d", "#f052e4", "#853fc2", "#f0f712", "#092978"],
}]
},
options: {}
});
window.onmessage = function(event){
myPieChart.data.datasets[0].data = event.data.data;
myPieChart.data.labels = event.data.labels;
myPieChart.update();
};
</script>
</body>
</html>
С помощью кнопки «Экспорт» я получаю обновленную круговую диаграмму на своей веб-странице. С помощью кода OnReady я получаю пробел в элементе HTML.