SovitChart示例
Sovit2D示例
Sovit3D示例
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://localhost:9188/static/sovitjs/jquery-ui.css">
<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>
-->
</head>
<body>
<div class="sovitjs_body">
<div id="tree_div"></div>
<div id="main_div">
<div class="main_bg">
<!-- demo_div此div里面是demo程序展示的容器 -->
<div class="demo_div">
<div id="chart_bar_1" style="width: 100%;height: 100%;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let sceneMain = null;
//说明：jCanvasQuery是SovitChart核心库提供的JQuery组件，类似$()，你也可以使用自己引入的JQuery库
jCanvasQuery(document).ready(function() {
//创建SovitChart解析器对象
sceneMain = new SovitChartPaser.SceneMain({
/**
* 说明：apiurl用来定义后端接口地址。当部署方式不一样时接口地址的写法不一样。
* 具体写法：
* 数维图云端部署：https://admin.sovitjs.com/restapi
* 私有版部署：http://192.168.0.10:9188
* 私有版部署时需要写对应部署的服务器的IP及服务端口
*/
apiurl: 'https://admin.sovitjs.com/restapi',
publishType: 1 //1为在线引用组件 2为离开引用组件
});
//引入图表并在指定的DIV里面显示
sceneMain.initChart("chart_bar_1", {
pageId: "2779773214836916226" //图表的ID，发布图表的地方可以找到
});
setInterval(function() {
//这里为模拟实时向图表发送动态数据，实际当中，数据需要从后端获取
sendJson("chart_bar_1");
}, 2500)
});
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, "Json27578923282144952380001", testJsons);
}
</script>
效果预览：
SovitChart后台编辑器创建柱状图表组件，样式效果通过编辑器中的属性配置进行设置。
绑定动态数据选择使用JSON数据源，定义好JSON格式并进行绑定，然后引入到自己的页面中(案例中是在线引入组件，如果是离线引入写法是一样的，只是引入的JS和文件下载放在自己的项目中)
SovitChart后台编辑器创建柱状图表组件，样式效果通过编辑器中的属性配置进行设置。
绑定动态数据选择使用JSON数据源，定义好JSON格式并进行绑定，然后引入到自己的页面中(案例中是在线引入组件，如果是离线引入写法是一样的，只是引入的JS和文件下载放在自己的项目中)
