Chart.js on wix issue: final result doesn't match data sent via Postmessage

问题

I am having a problem in building a pie chart with Google charts. I'm working with Wix. I manage to feed by Chart (HTML element on the page) with values stored in variables generated on my Wix web page, however, the final numbers are not right... (as they appear on the chart). Here is the page code:

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

} );

Please note that for now (given current stage of local storage), the values of the variables are: Rodeo = 8; Calypso = 0; Balthazar = 5; Luna = 1; Kiara = 4; Mistral = 2 and Saya = 4.

Here is the iframe code:

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

Once pubished on the live website, I get a pie chart where: Rodeo = 3; Calypso = 3; Balthazar = 4; Luna = 3; Kiara = 6; Mistral = 3 and Saya = 0.

The expected result would be to match the values mentioned above: Rodeo = 8; Calypso = 0; Balthazar = 5; Luna = 1; Kiara = 4; Mistral = 2 and Saya = 4. Any idea why this is happening?

来源：https://stackoverflow.com/questions/55292302/chart-js-on-wix-issue-final-result-doesnt-match-data-sent-via-postmessage

标签

javascript

html

charts

wixcode