数据可视化JS脚本使用技巧分享—实时显示当前系统时间大数据行业资讯-美林数据

产品简介

美林新闻/NEWS

首页美林数据行业资讯

数据可视化JS脚本使用技巧分享—实时显示当前系统时间

2023-06-16 14:24:15 次

在数据可视化中，为了让图表更加生动和灵活，我们经常需要添加一些动态和实时的元素，如当前系统时间。在本文中，我们将分享一种实现数据可视化图表中显示当前系统时间的JS代码技巧，帮助用户在数据可视化中添加更多的实用功能。
►使用场景：在可视化大屏设计时，部分业务场景需要显示当前系统时间，参数以及动态文本的方式只能显示当前时间，但无法一直自动刷新，只有在页面或图表刷新时时间才会更新。为了满足页面一直显示当前系统时间，可按照下方操作实现。
►适用产品：Tempo数据可视化平台
►操作步骤：
1、拖入JS组件到画布中，点击图表进行编辑：

2、在JS中，分为HTML、JS、CSS三部分，按照3个模块，分别添加代码在编写框内后，点击确定即可：

♦ HTML
<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;
}

通过以上三个部分，我们可以实现数据可视化图表中显示当前系统时间的功能。

经过本文的介绍，我们了解到了如何使用JS代码来实现数据可视化图表中显示当前系统时间的功能。这个功能能够帮助用户更好地了解当前时间和数据的关系，为数据分析和决策提供更多的依据和参考。我们可以基于这个方法，进一步探索和发掘JS代码的更多功能，从而实现更加灵活多变的数据可视化图表。

上一篇：让人头疼的时序数据预测，Tempo机器学习平台简单三步帮您搞定下一篇：数字化车间管控提高管理效率

Tempo大数据分析平台

Tempo商业智能平台

Tempo人工智能平台

Tempo数据工厂平台

Tempo数据治理平台

Tempo主数据管理平台

Tempo指标建设平台

自助式可视化分析

算法模型管理

指标管理解决方案

数字指挥中心

湖仓一体解决方案

智能场景应用构建

主数据应用监管

数据中台

发电

电网

制造

油气

煤炭

高校

政企

金融

科研院所

DCMM认证

DAMA认证

内容中心

帮助中心

美林数据

合作生态

美林新闻

行业资讯

产品简介

Tempo大数据分析平台

Tempo商业智能平台

Tempo人工智能平台

Tempo数据工厂平台

Tempo数据资产管理平台

Tempo主数据管理平台

相关推荐

美林新闻/NEWS

数据可视化JS脚本使用技巧分享—实时显示当前系统时间

联系我们

400-608-2558 029-8869-6198

扫码关注我们

扫码立即咨询