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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
javascript 写类方式之十
Jul 05 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
基于js判断浏览器是否支持webGL
Apr 18 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP chr()函数讲解
2019/02/11 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
分享6个隐藏的python功能
2017/12/07 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python插件机制实现详解
2020/05/04 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
大学毕业生通用自荐信范文
2013/10/31 职场文书
财务会计实习报告体会
2013/12/20 职场文书
售房协议书
2014/08/19 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书