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 相关文章推荐
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
JS实现拖动示例代码
Nov 01 Javascript
javascript的几种写法总结
Sep 30 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
微信小程序使用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
CodeIgniter安全相关设置汇总
2014/07/03 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
微信小程序实现城市列表选择
2018/06/05 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python爬虫基本知识
2018/03/05 Python
python实现windows下文件备份脚本
2018/05/27 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python 在函数上添加包装器
2020/07/28 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
shell程序中如何注释
2012/02/17 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
培训自我鉴定
2014/01/31 职场文书
我的祖国演讲稿
2014/05/04 职场文书
效能监察建议书
2014/05/19 职场文书
公积金具结保证书
2015/05/11 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技