SovitChart示例

Sovit2D示例

Sovit3D示例


<!DOCTYPE html>
<html lang="en">

	<head>
		<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.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',
			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和文件下载放在自己的项目中)

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

免费开发我的场景