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 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
js+canvas实现画板功能
Sep 13 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 Directory 函数的详解
2013/03/07 PHP
PHP修改session_id示例代码
2014/01/08 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python字典对象实现原理详解
2019/07/01 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
《小石潭记》教学反思
2014/02/13 职场文书
犯错检讨书
2014/02/21 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
淘宝好评语大全
2014/05/05 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
公司庆典欢迎词
2015/01/26 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python