数据可视化JS脚本使用技巧分享—实时显示当前系统时间
2023-06-16 14:24:15
次
在数据可视化中，为了让图表更加生动和灵活，我们经常需要添加一些动态和实时的元素，如当前系统时间。在本文中，我们将分享一种实现数据可视化图表中显示当前系统时间的JS代码技巧，帮助用户在数据可视化中添加更多的实用功能。
►使用场景：在可视化大屏设计时，部分业务场景需要显示当前系统时间，参数以及动态文本的方式只能显示当前时间，但无法一直自动刷新，只有在页面或图表刷新时时间才会更新。为了满足页面一直显示当前系统时间，可按照下方操作实现。
►适用产品：Tempo数据可视化平台
►操作步骤：
1、拖入JS组件到画布中，点击图表进行编辑：
2、在JS中，分为HTML、JS、CSS三部分，按照3个模块，分别添加代码在编写框内后，点击确定即可：
<div class="container">
<span class="time"></span>
<span class="date"></span>
</div>
♦ JS
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
clearTimeout(t); //清除定时器
var dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours()<10?"0"+dt.getHours():dt.getHours(); //获取时
var m = dt.getMinutes()<10?"0"+dt.getMinutes():dt.getMinutes(); //获取分
var s = dt.getSeconds()<10?"0"+dt.getSeconds():dt.getSeconds(); //获取秒
var week = "日一二三四五六".charAt(new Date().getDay());
document.querySelector(".time").innerHTML = `${h}:${m}:${s}`;
document.querySelector(".date").innerHTML = `${y}.${mt}.${day} 星期${week}`;
t = setTimeout(time, 1000); //设定定时器，循环运行
}
time();
global.init = function(data) {
if(window.parent.location.href.indexOf('publish/show') > 0 || window.parent.location.href.indexOf('preview/') > 0){
window.parent.$('#02358c0972d440e095b7336358d73349').find('div.tempo-basenode-handle').remove(); }
}
♦ CSS
.container {
color: #FF0000;
display: flex;
align-items: center;
height: 100%;
}
.time {
font-size: 15px;
font-weight: 600;
margin-right: 5px;
}
.date {
font-size: 12px;
}
通过以上三个部分，我们可以实现数据可视化图表中显示当前系统时间的功能。
Tempo商业智能平台
Tempo人工智能平台
Tempo数据工厂平台
Tempo指标平台
Tempo数据治理平台
Tempo主数据管理平台
首页
陕公网安备 61019002000171号
