Использование локального хранилища (JavaScript) в элементе HTML Wix - PullRequest
Новая
       8

Использование локального хранилища (JavaScript) в элементе HTML Wix

0 голосов
/ 19 марта 2019

Я создал элемент HTML на своей странице Wix с помощью Google Charts. Посетители моей веб-страницы должны заполнить анкету, и идея заключается в том, чтобы дать им результаты с помощью круговой диаграммы. Вот часть кода моего HTML-элемента: 

<script type="text/javascript">

var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: {
        labels:["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"],
        datasets: [{
            data: [10, 20, 30, 20, 25, 40, 15],
            backgroundColor: ["#f97a03", "#52aff0", "#35a11d", "#f052e4", "#853fc2", "#f0f712", "#092978"],
        }]
    },
    options: {}
});

</script>

Приведенный выше код прекрасно работает, и я вижу график на веб-странице. Теперь вместо предопределенных данных (например, 10, 20, 30, 20, 25, 40, 15 выше) я бы хотел использовать переменные, значения которых хранятся в JavaScript LocalStorage (имена переменных такие же, как в приведенных выше таблицах, но с "loc" в качестве префикса).

Я пытался: 

data: [local.getItem("locrodeo"), local.getItem("loccalypso"), 
local.getItem("locsaya"), local.getItem("locbalthazar"),
local.getItem("locluna"), local.getItem("lockiara"), 
local.getItem("locmistral")],

Но я думаю, что API не работают с JS в HTML-компоненте wix. Поэтому я думаю, что мне нужно отправить сообщение из моего кода страницы в элемент HTML с информацией в нем. Кто-нибудь знает, как это сделать?

В Справочном центре Wix я обнаружил, что мне нужно отправить сообщение, подобное этому: 

$w("#myHtmlElement").postMessage("Message for HTML Comp");

А затем мне нужно написать код в моем HTML-элементе, чтобы получить информацию: 

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;
    }
  };

  //...

</script>

Для ясности моя цель состоит в том, чтобы иметь круговую диаграмму, показывающую значения переменных locrodeo, loccalypso, locsaya, locluna, locbalthazar, locmistral и lockiara (хранятся в локальном хранилище JS).

1 Ответ

0 голосов
/ 19 марта 2019

Этот пример как раз о том, что вы хотите сделать: https://www.wix.com/code/home/example/Chart.

...