在 Wix 中使用 Chart.js 制作图表时出现问题？

Question

我在使用 chart.js 构建饼图时遇到问题..我在 wix.com 工作..我面临的问题是 2 postmessage()..

这是页面代码....

import wixData from 'wix-data';

import { session } from 'wix-storage';

var name = session.getItem('name');
var platformName = session.getItem('platform');

import { getchampionranks } from 'backend/pcprofile.jsw';

$w.onReady(function () {

    getchampionranks('pronil07').then(res => {

        console.log(res);

        var data = [];

        var labels = [];
        for (var i = 0; i <= res.length - 1; i++) {

            data.push(res[i].Minutes.toString());

            labels.push(res[i].champion.toString());
        }
        console.log(data);
        console.log("Data length: " + data.length);
        console.log(labels);
        console.log("Label length: " + labels.length);

        $w("#html1").postMessage(data);

        //$w("#html1").postMessage(labels);


    });

});

这是 iframe 代码...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 <script src ="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="146" height="149"></canvas>
<script>

  var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: [],
        datasets: [{
            label: 'wins/loss',
            data: [],
            backgroundColor: [
                '#3ddba1',
                '#e02a2a',
        '#4286f4',
        '#6897e2',
        '#444a54',
        '#45a567',
         '#91a545',
        '#a87534',
        '#8c6e8a'            
            ],

            borderWidth: 1
        }]
    },
    options: {

        cutoutPercentage : 0,
         rotation: Math.PI * 0.8,
    legend:{
          display: false,
           position: 'bottom',

},              
    animation: {
           easing:  'easeOutElastic',   
          Steps: 100,

         animateRotate : true,
           animateScale : true
    }
    }
});

  window.onmessage = function(event){
      myChart.data.datasets[0].data = event.data;

      myChart.update();
      };

  function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
  }

</script>

</body>
</html>

这样做..我得到这样的结果..

Result

我正在获取带有数据数组的图表..但标签未定义.. 如果我取消引用 postmessage(labels) 并通过 2 postmessage() 发送数据和标签。.图表不会形成... 我需要将数据和标签数组从页面代码发送到 iframe ... 有什么解决办法吗？？？？？

Answer 1

最简单的方法是在一个对象中发送页面代码中的数据和标签。然后在 HTML 元素中，您可以使用该对象设置图表的数据和标签。

在你的情况下，它看起来像这样：

页面代码：

let info = {data:data, labels:labels};
$w("#html1").postMessage(info);

HTML 元素代码：

window.onmessage = function(event){
   myChart.data.datasets[0].data = event.data.data;
   myChart.data.labels = event.data.labels;

   myChart.update();
};

Answer 2

你说得对！这是最简单的方法。这是页面代码...

var data = [];

for (var i = 1; i < 7; i++) {
var _temp = Math.log10(i);
data.push(_temp);
}
var labels = ["September", "October", "Novemver", "December", "January", "February"];

 $w.onReady(() => {
 console.log("Data length: " + data.length);
 console.log(data);
 console.log("Label length: " + labels.length);
 console.log(labels);

 $w("#html1").onMessage((event) => {

    let info = { data: data, labels: labels };

    if (event.data.type === 'ready') {
        $w("#html1").postMessage(info);
    }
    });
});

这是 html 代码...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 <script src ="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"> 
</script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    labels: [],
    datasets: [{
        label: 'Our activity',
        data: []            
    }]
},
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
          }
        }]
      }
    }
});

window.onmessage = function(event){

myChart.data.datasets[0].data = event.data.data;
myChart.data.labels = event.data.labels;
  myChart.update();
  };

function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
}

在 Wix 中使用 Chart.js 制作图表时出现问题？

Problem in making chart with Chart.js in wix?

iframe

chart.js

velo