highCharts提示框中显示当前时间的方法


Posted in Javascript onJanuary 18, 2019

一、项目需求提示框中需要显示当前时间(常规的提示并不能达到这种效果)

样式

highCharts提示框中显示当前时间的方法

二、知识点

highCharts图表tooltip属性中有一个formatter属性

formatter: function() {……} 提示框内容格式化回调函数,返回 false 可以针对某个点或数据列关闭提示框,该函数里可以执行复杂的逻辑来返回需要的内容。

三、代码

shared: true,//当提示框被共享时,整个绘图区都将捕捉鼠标指针的移动。提示框文本显示有序数据(不包括饼图,散点图和标志图等)的系列类型将被显示在同一个提示框中。
    formatter : function() {//提示框内容格式化回调函数,返回 false 可以针对某个点或数据列关闭提示框,该函数里可以执行复杂的逻辑来返回需要的内容。
      var content = '';
      for (var i = 0; i < this.points.length; i++) {
        if(i == this.points.length-1){
          content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'℃'+'<br/>';
        }else{
          content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'%'+'<br/>';
        }
      };
      var date = new Date();
      var nowYear=date.getFullYear().toString();
      var nowMonth=(date.getMonth() + 1).toString();
      var nowDay=date.getDate().toString(); 
      var nowHours=date.getHours().toString(); 
      var nowMin=date.getMinutes().toString(); 
      var nowSeconds=date.getSeconds().toString(); 
      function timeAdd0(str) { 
        if(str.length<=1){ 
          str='0'+str; 
        } 
        return str 
      } 
      nowYear=timeAdd0(nowYear) ;
      nowMonth=timeAdd0(nowMonth) ;
      nowDay=timeAdd0(nowDay) ;
      nowHours=timeAdd0(nowHours) ;
      nowMin=timeAdd0(nowMin);
      nowSeconds=timeAdd0(nowSeconds)
      content = '<span>' + nowYear + '/' + nowMonth + '/' + nowDay + ' ' + nowHours + ':' + nowMin + ':' + nowSeconds + ' year' + '</span><br/>' +content;
      return content;
    },

highCharts提示框中显示当前时间的方法

四、效果

highCharts提示框中显示当前时间的方法

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 #Javascript
js中数组对象去重的两种方法
Jan 18 #Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 #Javascript
js中的reduce()函数讲解
Jan 18 #Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 #Javascript
vue-cli3 karma单元测试的实现
Jan 18 #Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python logging类库使用例子
2014/11/22 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python进行特征提取的示例代码
2020/10/15 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
大学生优秀团员事迹材料
2014/01/30 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python