SovitChart示例

Sovit2D示例

Sovit3D示例


<!DOCTYPE html>
<html lang="en">
	<head>
		<title id="page_title"></title>
		<meta name="referrer" content="strict-origin-when-cross-origin">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<meta charset="UTF-8">
		<meta name="referrer" content="no-referrer" />
	</head>

	<body style="background-color: #e5e7ea;">
		<div class="main-case" style="min-height: 500px;padding-top: 30px;">
			<div class="sovitjs_body">
					</div>
					<div id="theLeftDiv" style="width:100%;background-color: #FFFFFF;box-shadow: 0 1px 7px 4px #c0c5cb;padding-top: 2px;height: 796px;margin-left: 10px;overflow-y: auto;">
						<div style="padding: 20px;">
							<div>回调事件测试:</div>
							<div id="reback_event" style="height: 80px;overflow: auto;"></div>
						</div>
						<!--https://admin.sovitjs.com/publish_2d/2945700478480023561-->
						<div id="sovit2d_1" style="width:1160px;height: 578px;margin-top: 0px;position: relative;">
							<iframe id="demo_iframe" src="https://admin.sovitjs.com/publish_3d/3044205730723790849" height="578" scrolling="auto" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
							</iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script>
	$(document).ready(function() {
		window.onmessage = handleIframeMessage;
	});
	
	function handleIframeMessage(event) {
		const data = event.data
		switch(data.cmd) {
			case 'EventCallback':
				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':
				if(data.params.success) {
					console.info(data);
					$("#reback_event").html(JSON.stringify(data));
				}
				break;
		}
	}
</script>
效果预览:
本例子用来展示了Sovit2D+SovitChart合并的场景,目前版本Sovit2D中可以直接集成chart图表。
对于Sovit2D场景中添加了Chart的场景在集成(DIV方式集成)的时候需要在js中同时调用2D解析器API和Chart解析器API 需要在模型发布时下载JS库文件和模型数据文件(svt格式)

回调事件测试:

通过数维图软件平台,实现零代码可视化开发!

免费开发我的场景