SovitChart示例
Sovit2D示例
Sovit3D示例
<!DOCTYPE html>
<html lang="en">
<head>
<title id="page_title">Sovit2D集成示例(DIV离线嵌入场景)</title>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<script src="./res/static/js/jquery-1.10.2.min.js"></script>
<!-- 导入样式文件 -->
<link rel="stylesheet" href="https://admin.sovitjs.com/static/sovitjs/jquery-ui.css">
<!--导入Sovit2D核心js库,官网后台发布场景的位置可以下载-->
<script src="https://admin.sovitjs.com/static/sovitjs/Sovit2DPaser.min.js"></script>
<!--导入SovitChart核心js库,2D场景中集成了chart则需要同时引入chart的js库-->
<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js"></script>
<!--
如果私有化部署时引入的是私有化系统的地址：如
<link rel="stylesheet" href="http://localhost:9188/static/sovitjs/jquery-ui.css">
<script src="http://localhost:9188/static/sovitjs/Sovit2DPaser.min.js"></script>
<script src="http://localhost:9188/static/sovitjs/SovitChartPaser.min.js"></script>
-->
</head>
<body style="background-color: #e5e7ea;">
<div class="main-case" style="min-height: 500px;padding-top: 30px;">
<div id="sovit2d_1" style="width:100%;height: 768px;margin-top: 20px;position: relative;">
<!--用来嵌入2D场景的DIV容器-->
</div>
</div>
</body>
</html>
<script>
let sceneMain = null;
let sceneChartMain = null;
$(document).ready(function() {
sceneMain = new Sovit2DPaser.Scene2dMain({
/**
* 说明：apiurl用来定义后端接口地址。当部署方式不一样时接口地址的写法不一样。
* 具体写法：
* 数维图云端部署：https://admin.sovitjs.com/restapi
* 私有版部署：http://192.168.0.10:9188
* 私有版部署时需要写对应部署的服务器的IP及服务端口
*/
apiurl: 'https://admin.sovitjs.com/restapi',
publishType: 1 //1为在线引用组件 2为离开引用组件
});
//初始化图表参数，如果场景中没有加入图表，则不用创建
sceneChartMain = new SovitChartPaser.SceneMain({
apiurl: 'https://admin.sovitjs.com/restapi',
publishType: 1 //1为在线引用组件 2为离开引用组件
});
let appObject = {};
//下面的方法是获取认证信息，在实际自己的系统集成时需要在自己的后台生成认证信息
//认证signature的生成方法请参考文档
jCanvasQuery.ajax({
url: "https://admin.sovitjs.com/restapi/sovit/Rest/appdemo/free/getSignatureJson?appid=1175",
method:'POST',
contentType: "application/json;charset=UTF-8",
async: false,
success: function(data) {
appObject = data.datas;
console.info(appObject);
},
error: function(msg) {
}
});
sceneMain.init2d("sovit2d_1", {
pageId: "3016916324979834885", //图表的ID，发布图表的地方可以找到2607404157748903944
appid: appObject.appid,
apikey: appObject.apikey,
method: appObject.method,
code: appObject.code,
signature: appObject.signature,//signature的生成需要使用密钥secret
params:{
"key1":1,
"key2":2,
"key3":"value"
}
},function(reData) {
console.info(reData)
$("#reback_event").html(JSON.stringify(reData));
});
sceneChartMain.initChart("sovit2d_1", {
appType: 'sovit2d',//注意，当Sovit2D中使用了chart，这里使用SovitChart的API时必须加上这个参数
pageId: "3016916324979834885", //图表的ID，发布图表的地方可以找到2607404157748903944
appid: appObject.appid,
apikey: appObject.apikey,
method: appObject.method,
code: appObject.code,
signature: appObject.signature,
params:{
"key1":1,
"key2":2,
"key3":"value"
}
},function(comId,eventType,reData) {
console.info(comId,eventType,reData)
$("#reback_event").html("组件ID："+comId+";事件类型"+eventType+";返回数据"+JSON.stringify(reData));
});
sendJson("sovit2d_1");
setInterval(function() {
//这里为模拟实时向图表发送动态数据，实际当中，数据需要从后端获取
sendJson("sovit2d_1");
}, 2000)
});
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);
//说明：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)
}]
}
];
sceneMain.sendJson(divId, "Json11750001", testJsons);
sceneChartMain.sendJson(divId, "Json11750001", testJsons);
}
</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格式)
回调事件测试：
