highCharts提示框中显示当前时间的方法

 更新时间:2019年01月18日 11:38:58   作者:muzidigbig  
今天小编就为大家分享一篇关于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;
    },

四、效果

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • 使用Vue父子组件通信实现todolist的功能示例代码

    使用Vue父子组件通信实现todolist的功能示例代码

    这篇文章主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • Vue AST的转换实现方法讲解

    Vue AST的转换实现方法讲解

    本节,我们将讨论关于AST的转换。所谓AST的转换,指的是对AST进行一系列操作,将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述,也可以是其他语言或其他DSL的描述。例如,我们可以对模板AST进行操作,将其转换为JavaScriptAST
    2023-01-01
  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table的列隐藏问题解决

    这篇文章主要介绍了element-ui 中的table的列隐藏问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解Vue的列表渲染

    详解Vue的列表渲染

    这篇文章主要为大家介绍了Vue的列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 如何利用Vue+Element做个小页面

    如何利用Vue+Element做个小页面

    vue使用element写东西让我感觉到了特别的方便,下面这篇文章主要给大家介绍了关于如何利用Vue+Element做个小页面的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Vue 实现可视化拖拽页面编辑器

    Vue 实现可视化拖拽页面编辑器

    这篇文章主要介绍了Vue 实现可视化拖拽页面编辑器的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2021-02-02
  • vue编译打包本地查看index文件的方法

    vue编译打包本地查看index文件的方法

    下面小编就为大家分享一篇vue编译打包本地查看index文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 如何在 Vue 中使用 JSX

    如何在 Vue 中使用 JSX

    这篇文章主要介绍了如何在 Vue 中使用 JSX,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2021-02-02
  • vue mounted 调用两次的完美解决办法

    vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下
    2018-10-10
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue.js 中的组件,需要的朋友参考下
    2018-02-02

最新评论