自定义 highcharts 工具提示以显示日期时间

2024-04-06

我正在开发一个项目,预计会显示此图:http://jsfiddle.net/Kc23N/ http://jsfiddle.net/Kc23N/

当我单击一个点(工具提示)时,我想显示一个可以理解的日期,而不是以毫秒为单位的值。

我认为需要更改这段代码:

tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x} date, {point.y} Kg',                        
}

我该怎么做?任何善意的帮助表示赞赏。

Thanks


您可以使用moment.js http://momentjs.com/获取格式化的值,但 Highcharts 有自己的日期格式化功能,这对于 Highcharts 来说更惯用。它可以附加到 highcharts 构造函数中的工具提示选项上,如下所示:

        tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%e - %b - %Y',
                                          new Date(this.x))
                + ' date, ' + this.y + ' Kg.';
            }
        }

您可能还想添加日期时间标签格式对象,其中包含您的日期所需的选项,位于 x 轴下。

我做了这个与你的例子code http://jsfiddle.net/Kc23N/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

自定义 highcharts 工具提示以显示日期时间 的相关文章

  • 如何在没有数据库的情况下创建AJAX分页?

    是否可以在没有 MySQL 帮助的情况下获取 AJAX 分页页面 难道我不能只添加一个包含我需要显示的文本和标记的 PHP 文件 然后通过单击页码将该内容提供给用户吗 那么可以用纯 jQuery 和 PHP 来实现吗 您会使用什么代码方法来
  • 如何使用 QuerySelector 获得第二个匹配项?

    以下语句给出了该类的第一个元素titanic element document querySelector titanic 我如何检索具有相同类的第二个元素 Use document querySelectorAll https devel
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • 可拖动的非模态弹出窗口 Jquery Mobile

    我希望在 Jquery mobile 中有一个弹出窗口 它不会阻止用户与页面交互 并且 data dismissible false 即当页面的另一部分与页面的另一部分交互并保持可见时 弹出窗口不会消失 我已经尝试过这个 popupNew
  • 递归链接 Promise

    我正在开发一个简单的 Windows 8 应用程序 我需要在其中从网站获取一组数据 我正在使用 WinJS xhr 来检索此数据 它返回一个 Promise 然后 我将回调传递到此 Promise 的 then 方法中 该方法为我的回调提供
  • 如何使用 Eclipse 作为 Javascript IDE?

    我从官方下载页面下载了 eclipse Javascript IDE 但是 当我启动应用程序时 它显示 必须提供 Java 运行时环境或 Java 开发工具包才能运行 eclipse 我已经有一个运行良好的 eclipse 的 java I
  • Java:从 ScriptEngine javascript 返回一个对象

    我正在尝试使用 Java 来评估 javascript脚本引擎 https docs oracle com javase 7 docs api javax script ScriptEngine html班级 这是我正在尝试做的事情的一个简
  • 有效地获取下拉列表中的选定选项(XHTML Select 元素)

    背景 使用 XHTML Select 元素的下拉列表中有大量选项 数十个 我需要使用 JavaScript 检索所选选项 Problem 目前我正在使用 jQuery selectedCSS 选择器并且它按预期工作 但这种方法效率不高 因为
  • 可点击的进度条

    我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条 这是我能做到的最好的 有没有办法将滑块放置在进度条内但不干扰进度可视化 堆栈闪电战 https stackblitz com edit angular
  • 从数据库中给定时间起经过的时间

    我有一个 HTML 表 其中包含从数据库中提取的记录 我正在使用 PHP MySQL 我的表中名为 Timer 的列未从数据库中检索 我需要在此处显示经过的时间 从数据库中的特定时间开始 例如 假设现在的时间是2013年2月21日下午6点2
  • JQuery 验证不起作用

    我有一种表单 其中一个输入类型的值为 名字 但这可以在 onfocus 函数上更改我想验证此输入字段 如果它为空白或 名字 我有两个 jQuery 文件jquery 1 4 2 min js jquery validate pack js
  • Chrome:window.print() 打印对话框仅在页面重新加载后打开 (javascript)

    我面临着一个非常奇怪的问题 我正在从 javascript 文件调用 window print 这在 Safari IE Firefox 中运行良好 直到两小时前 它在 Chrome 中也运行良好 版本29 0 1547 57 我没有更改我
  • 有没有办法限制 Google 地点自动完成功能搜索城市的街道?

    使用 Google 地方信息时可以将搜索限制在城市的街道吗Autocomplete 您可以设置Autocomplete使用选项geocode作为类型 这将限制返回到地址的结果 var input document getElementByI
  • 如何在javascript中删除对象的一部分

    这是我的代码 var data btn click function total data push id total cell val1 val2 val3 每次用户点击btn按钮 我向数据对象添加一些值 现在我的问题是如何删除有的部分i
  • 如何使用 jQuery 以编程方式单击 Gmail 中的“显示下面的图像”?

    我正在创建一个 Google Chrome 扩展程序 它使用 jQuery 在 Gmail 中添加了 显示下面的图像 链接的键盘快捷键 我尝试了以下方法来模拟点击 但未成功 canvas frame contents find span c
  • 向上/向下滚动到带有固定按钮的部分

    我想构建一个用于向上 向下滚动到页面部分标签的脚本 我的源代码如下所示 HTML div class move div class previous UP div div class next DOWN div div section Fi
  • 用于检查字符串是否至少包含 3 个字母数字字符的最有效的正则表达式

    我有这个正则表达式 a zA Z0 9 3 我用它来查看字符串中是否至少包含 3 个字母数字字符 似乎有效 它应该匹配的字符串示例 a3c 0 c 8 9 9d 但是 我需要它更快地工作 有没有更好的方法使用正则表达式来匹配相同的模式 编辑
  • 我应该采取什么圆角方法?

    因此 关于圆角的信息并不缺乏 我已经经历过其中的大部分 我发帖是为了征求社区对这一点的意见 我的场景是 我们正在开发一个圆角相关设计 主要用于交互
  • 如何使用 jQuery 使 div 全屏并位于所有其他元素之上?

    div style background color grey div 有简单的方法吗 定义样式overlay或类似的东西 然后你可以使用 jQuery 添加新类 myDiv addClass overlay 如果你想添加点击事件 你可以这
  • Charts_flutter x 轴上的标签/文本相互重叠

    我使用flutter中的charts flutter包渲染条形图 但 x 轴上的域标签相互重叠 我有办法解决这个问题吗 有没有办法倾斜文本或增加图表的宽度 使其可以水平滚动 我尝试过寻找任何解决方案 例如 labelspecs 但无法找到解

随机推荐