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中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
jquery ui对话框实例代码
May 10 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
vue实现图片裁剪后上传
Dec 16 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
destoon数据库表说明汇总
2014/07/15 PHP
浅谈php冒泡排序
2014/12/30 PHP
浅谈php自定义错误日志
2015/02/13 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python进程类subprocess的一些操作方法例子
2014/11/22 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python中正则表达式的用法总结
2019/02/22 Python
Pygame框架实现飞机大战
2020/08/07 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
初中三好学生事迹材料
2014/01/13 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
马智宇结婚主持词
2014/04/01 职场文书
爱护环境建议书
2015/09/14 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电