Проблема в создании диаграммы с Chart.js в wix? - PullRequest
Новая
       36

Проблема в создании диаграммы с Chart.js в wix?

0 голосов
/ 05 сентября 2018

У меня проблема с построением круговой диаграммы с 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>

При этом .. я получаю такой результат ..

Результат

Я получаю диаграмму с массивом данных ... но метки не определены .. И если я кавычу postmessage(labels) и отправлю данные и метки через 2 postmessage() .. диаграмма не сформируется ... Мне нужно отправить массив данных и меток в iframe из кода страницы ... Любое решение ?????

1 Ответ

0 голосов
/ 06 сентября 2018

Это проще всего сделать, отправив данные и метки из кода вашей страницы в один объект. Затем в элементе 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();
};
...