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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
Javascript事件实例详解
Nov 06 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php 读取文件乱码问题
2010/02/20 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python计算两个数的百分比方法
2018/06/29 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
详解python播放音频的三种方法
2019/09/23 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
领导的自我鉴定
2013/12/28 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python