Question

使用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； Calypso = 0； Balthazar = 5；月神= 1; Kiara = 4； Mistral = 2，Saya = 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； Calypso = 3； Balthazar = 4；月神= 3; Kiara = 6； Mistral = 3，Saya = 0。

预期结果将与上述值匹配：Rodeo = 8； Calypso = 0; Balthazar = 5；月神= 1; Kiara = 4； Mistral = 2，Saya =4。您知道为什么会这样吗？

关于wix问题的Chart.js：最终结果与通过Postmessage发送的数据不匹配

0 个答案: