SovitChart示例
Sovit2D示例
Sovit3D示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<script src="./res/static/js/jquery-1.10.2.min.js"></script>
</head>
<body style="background-color: #e5e7ea;">
<div id="sovit2d_1" style="width:1160px;height: 768px;margin-top: 0px;position: relative;">
<!-- 直接链接场景发布的链接 -->
<iframe id="demo_iframe" src="https://admin.sovitjs.com/publish_2d/2945700478480023561" height="700" scrolling="auto" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
</iframe>
</div>
</body>
</html>
<script>
$(document).ready(function() {
window.onmessage = handleIframeMessage;
sendJson();
setInterval(function() {
//这里为模拟实时向图表发送动态数据，实际当中，数据需要从后端获取
sendJson();
}, 2000)
});
function handleIframeMessage(event) {
const data = event.data
switch(data.cmd) {
case 'EventCallback'://EventCallback代表2D组件事件回调返回的数据
if(data.params.success) {
console.info(data);
$("#reback_event").html(JSON.stringify(data));
let reJson = data.params.data.props;
} else {
console.info("事件数据获取失败")
}
break;
case 'EventChartCallback'://EventChartCallback代表chart事件回调返回的数据
if(data.params.success) {
console.info(data);
$("#reback_event").html(JSON.stringify(data));
}
break;
}
}
function sendJson(divId) {
let random = (Math.random() + 0.5).toFixed(2);
let random1 = (Math.random() + 0.5).toFixed(2);
let random2 = (Math.random() + 0.5).toFixed(2);
let random3 = (Math.random() + 0.5).toFixed(2);
let random4 = (Math.random() + 0.5).toFixed(2);
let random5 = (Math.random() + 0.5).toFixed(2);
let random6 = (Math.random() + 0.5).toFixed(2);
let reData = {};
//说明：json的格式与编辑器中绑定数据时的JSON格式一致
let testJsons = [{
"legend": "当月累计发电量",
"datas": [{
"name": "电站1",
"value": (100 * random).toFixed(2)
}, {
"name": "电站2",
"value": (100 * random1).toFixed(2)
}, {
"name": "电站3",
"value": (100 * random2).toFixed(2)
}, {
"name": "电站4",
"value": (100 * random3).toFixed(2)
}, {
"name": "电站5",
"value": (100 * random4).toFixed(2)
}, {
"name": "电站6",
"value": (100 * random5).toFixed(2)
}, {
"name": "电站7",
"value": (100 * random6).toFixed(2)
}]
},
{
"legend": "上月同期发电量",
"datas": [{
"name": "电站1",
"value": (120 * random).toFixed(2)
}, {
"name": "电站2",
"value": (140 * random1).toFixed(2)
}, {
"name": "电站3",
"value": (160 * random2).toFixed(2)
}, {
"name": "电站4",
"value": (150 * random3).toFixed(2)
}, {
"name": "电站5",
"value": (140 * random4).toFixed(2)
}, {
"name": "电站6",
"value": (130 * random5).toFixed(2)
}, {
"name": "电站7",
"value": (120 * random6).toFixed(2)
}]
}
];
reData.jsonObj = testJsons;
reData.tagName = "Json11750001"//json绑定数据tag
//向场景中发布JSON数据
document.getElementsByTagName('iframe')[0].contentWindow.postMessage({
cmd: 'JsonSend',
params: {
success: true,
data: reData
}
}, '*');
}
</script>
效果预览：
本例子用来展示了Sovit2D+SovitChart合并的场景，目前版本Sovit2D中可以直接集成chart图表。
对于Sovit2D场景中添加了Chart的场景在集成(DIV方式集成)的时候需要在js中同时调用2D解析器API和Chart解析器API 需要在模型发布时下载JS库文件和模型数据文件(svt格式)
本例子用来展示了Sovit2D+SovitChart合并的场景，目前版本Sovit2D中可以直接集成chart图表。
对于Sovit2D场景中添加了Chart的场景在集成(DIV方式集成)的时候需要在js中同时调用2D解析器API和Chart解析器API 需要在模型发布时下载JS库文件和模型数据文件(svt格式)
回调事件测试：
