Chart.js при выпуске wix: конечный результат не соответствует данным, отправленным через Postmessage - PullRequest
Новая
       11

Chart.js при выпуске wix: конечный результат не соответствует данным, отправленным через Postmessage

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

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

$w.onReady(function () {
//Pulling data from local storage
var dataset = [local.getItem("locrodeo"), local.getItem("loccalypso"), local.getItem("locbalthazar"), local.getItem("locluna"), local.getItem("lockiara"), local.getItem("locmistral"), local.getItem("locsaya")];

//Converting string data into integers
  var crodeo = dataset[0];
  var introdeo = parseInt(crodeo, 10);
  var ccalypso = dataset[1];
  var intcalypso = parseInt(ccalypso, 10);
  var cbalthazar = dataset[2];
  var intbalthazar = parseInt(cbalthazar, 10);
  var cluna = dataset[3];
  var intluna = parseInt(cluna, 10);
  var ckiara = dataset[4];
  var intkiara = parseInt(ckiara, 10);
  var cmistral = dataset[5];
  var intmistral = parseInt(cmistral, 10);
  var csaya = dataset[6];
  var intsaya = parseInt(csaya, 10);

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);

} );

Обратите внимание, что на данный момент (учитывая текущую стадию локального хранилища) значения переменных следующие: Rodeo = 8; Калипсо = 0; Бальтазар = 5; Луна = 1; Киара = 4; Мистраль = 2 и Сая = 4.

Вот код iframe: 

<!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>

После публикации на веб-сайте я получаю круговую диаграмму, где: Rodeo = 3; Калипсо = 3; Бальтазар = 4; Луна = 3; Киара = 6; Мистраль = 3 и Сая = 0.

Ожидаемый результат будет соответствовать значениям, указанным выше: Rodeo = 8; Калипсо = 0; Бальтазар = 5; Луна = 1; Киара = 4; Мистраль = 2 и Сая = 4. Есть идеи, почему это происходит?

...