iframe - 在 wix 中使用 Chart.js 制作图表时出现问题?
问题描述
我在使用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 的数组...任何解决方案??????
解决方案
最简单的方法是将页面代码中的数据和标签发送到一个对象中。然后在 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();
};
推荐阅读
- javascript - JavaScript - - 委托设计模式的类设计模式,Object.create() 的新构造函数
- wordpress - 找不到wordpress页面,wordpress安装在子目录下
- c# - Neo4j 架构迁移?
- ios - UIViewControllerWrapperView 背景颜色问题
- ssis - 如何在 SSIS 中解析文本文件
- android - ConstraintLayout:按顺序动画多个ConstraintSet
- javascript - 如何使用 AJAX 和 PHP 将 JavaScript 变量发布到 MySQL 数据库中?
- android - 如何使按钮上的点击动作可见?
- react-native - 如何在 React Navigation 中为静态 navigationOptions 创建组件?
- python - Django 构建查询的最佳方法是什么