highcharts 工具提示错误日期

2023-12-30

我制作了一个高图表,该工具提示以格式显示日期和时间,但它显示了错误的日期和时间。

请仔细阅读下面的代码。

HTML 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript 代码

var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({

    credits: {
        enabled: false
    },  
    chart: {
        type: 'column',
        renderTo: 'container',
    },
    title: {
        text: 'Weekly Traffic'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            format: '{value:%d-%b-%Y}',
            rotation:-45,
        },
    },

    yAxis: {
        labels:{enabled: false},
     title: {
              text: ''
           },
    }, 

          tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+': '+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br>'+   Highcharts.numberFormat((this.y /maxval ) * 100) + '%';
                }
            },

    plotOptions: {
        line: {
         enableMouseTracking: false
        },

        series:{
         pointStart: 1444242600000,
        pointInterval: 86400000,
             shadow:false,
         dataLabels:{
            enabled:true,
            formatter:function()
                {
                var pcnt = (this.y /maxval ) * 100;
                return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }    
},

    series: [{
        name: 'Firefox',
        data: [10,56,32,12,64,13,38],
    },{
        name: 'Chrome',
        data: [52,59,10,60,94,3,8],
    },{
        name: 'Edge',
        data: [22,56,20,35,14,73,38],
    },{
        name: 'Opera',
        data: [30,36,80,65,44,53,81],
    },{
        name: 'Safari',
        data: [40,16,50,77,34,33,36],

    }],

    });

});

});

给出了工作小提琴here. http://jsfiddle.net/w0dn75qu/4/


您需要在 highcharts 的全局选项中将 utc 设置为 false。

 Highcharts.setOptions({
global: {
    useUTC: false
}
});

see 在这里更新了小提琴 http://jsfiddle.net/Nishith/w0dn75qu/5/

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

highcharts 工具提示错误日期 的相关文章

  • 动态添加 Y 轴

    是否可以向 Highstock 图表添加新的 y 轴 我尝试过在选项中添加一个并重新绘制 但这似乎不起作用 HighCharts 的文档包含图表对象的 addAxis 函数 但在 HighStock 中该函数不存在 还有其他选择吗 请看一下
  • 如何在将在移动设备浏览器上打开的 Highcharts 工具提示中添加链接?

    我正在使用 expo 开发一个 React Native 应用程序 其中一个屏幕包含使用 Highcharts 创建的图形 所有点都有一个关联的tooltip带有一些文本 我想添加一个链接 该链接将在浏览器中 即应用程序外部 打开 URL
  • 解析 DateFormat 时的 Java 时区

    我的代码解析日期如下 String ALT DATE TIME FORMAT yyyy MM dd T HH mm ss SSSZ SimpleDateFormat sdf new SimpleDateFormat ALT DATE TIM
  • Highcharts 工具提示中未触发点击事件

    我正在使用 Highchart 库 我通过格式化程序函数回调创建一个工具提示 并在工具提示内插入一个链接 config tooltip formatter function console log this var tooltipHTML
  • Highmaps 多个系列在不禁用一个系列的情况下无法看到

    我有 2 个系列 如下所示 div div function Highcharts mapChart container chart
  • 将 Highcharts 最大 Y 值设置为精确值而不进行四舍五入

    每次我在 Highcharts 中设置最小值和最大值时 我都不会得到具有我发送的精确最小值和最大值的图表 但总是有些接近的值 似乎 Highcharts 正在为轴选择一个间隔范围 如果我的最大值不符合正确的间隔 它就会被忽略或四舍五入 例如
  • 逐行修改csv文件

    我有一个大文件 我想修改其中的每一行 我想使用 PHP 快速完成 我的文件是 CSV 文件 20010103 02 00 00 0 9496 20010103 03 00 00 0 9504 20010103 04 00 00 0 9499
  • Highcharts 有“趋势线”功能吗?

    基本上 我试图让 Highcharts 自动绘制从第一个数据点到最后一个数据点的直线 以便我可以更轻松地看到 总体趋势 我相信这被称为 趋势线 或其他东西 但我在文档中没有找到与之相关的任何内容 不过 它很可能仍然具有此功能 可以 据我所知
  • 在 Django 中格式化日期时如何使用本地化的“短格式”?

    我需要显示本地化的格式化日期 如果我使用 django utils formats localize 则日期返回为 2012 年 6 月 11 日 如何将日期格式化为返回 06 11 2012 并进行适当的本地化 例如 11 06 2012
  • Oracle SQL 将日期格式从 DD-Mon-YY 转换为 YYYYMM

    我要比较 2 个表中的日期 但问题是一个表的日期采用 DD Mon YY 格式 另一个表的日期采用 YYYYMM 格式 我需要将它们都设为 YYYYMM 进行比较 我需要创建这样的东西 SELECT FROM offers WHERE of
  • Highcharts xAxis 钻取未正确更改

    http jsfiddle net ZBXV7 2 http jsfiddle net ZBXV7 2 when I click a column or label the xAxis write incorrect label but t
  • 数据按用户分组为每周、每月

    我有一个高库存折线图 显示给定股票的每日和每周股价 问题是 当数据数组足够大时 每日数据点将被 采样 为每周数据点 而每周数据点将被采样为每月数据点 有什么方法可以根据需要将用户设置为每周或每月 提前致谢 检查一下数据分组 http www
  • HighChart:多个图表的绘图线单击事件

    我正在使用 highchart 来实现一些向下钻取功能 我有一个功能可以让用户单击面积图并添加一条线 但后来我发现我的函数有一个错误 这些图表之间应该只有一条红线 但是当用户单击另一个图表时 第一个图表上的现有红线不会被删除 以下是我分享的
  • 如何在 R 中设置 highchart 全局选项

    我在 javascript 中看到了很多示例 但我找不到在 R 中执行此操作的示例 这是 API 链接 http api highcharts com highcharts global http api highcharts com hi
  • Highstocks 图表宽度未正确呈现

    您好 我在使用 jquery 选项卡时遇到 highstocks 问题 这是构造函数的代码 Chart new Highcharts StockChart Chart new Highcharts StockChart chart rend
  • 如何获取带有完整月份名称的完整日期,例如 2015 年 11 月 2 日

    我想将完整月份的日期加载到文本框中 这意味着用户每次想要在文本框中保存日期时都会获得当前日期和时间 他们不会写任何东西 这是我想要的格式 2015 年 11 月 2 日 但没有得到我想要的结果 我得到了这个结果 DD NOV 2015 但这
  • 导入数据期间解析日期格式的最佳方法

    我创建了在数据导入 400 K 记录 期间解析视图不同日期格式的方法 我的方法捕获 ParseException 并尝试在不同时使用下一种格式解析日期 问题 在数据导入期间设置正确的日期格式是更好的方法 更快 吗 private stati
  • Highcharts 工具提示裁剪

    我正在使用高图表 但遇到了较大的工具提示在 SVG 外部元素处被裁剪的问题 如下图所示 选项useHTML工具提示和 xAxis 设置为 true 因为我正在应用一些自定义 CSS 这些元素 有没有办法让工具提示不被裁剪 我的 highch
  • 图表处理程序配置中的临时图像目录无效

    我正在使用 highchart 仅当我在内网网络中的 IIS 服务器上运行我的网站时 才会出现此错误 相反 它在开发服务器中运行良好 Visual Studio 2012 图表处理程序配置中的临时图像目录无效 c TempImageFile
  • 在react-highcharts中动态更改系列数据,无需重新渲染图表

    I have created a line chart using react highcharts It has 3 series and different data for each of them And I have a rang

随机推荐

  • Cloud Dataflow - 增加 JVM Xmx 值

    我们正在尝试在云中运行 Google Cloud Dataflow 作业 但我们不断收到 java lang OutOfMemoryError Java 堆空间 我们正在尝试处理 Big Query 表中的 6 1 亿条记录 并将处理后的记
  • Mapbox fitbounds() - 无效的 LngLat 对象:(NaN, NaN)

    在过去的几个小时里 我一直用头撞桌子 我试图让 Mapbox 放大所有标记的边界区域的负载 但是 这是我在下面的代码中遇到的错误 此错误出现在下面的控制台日志图像之后 因此 lat lng 坐标肯定存在 未捕获的错误 无效的 LngLat
  • 如果仓库自动查看自述文件,自述文件中的相对链接就会损坏

    我有一个仓库作为 github 上组织的一部分 例如 MYORGANIZATION MyRepository 该存储库包含一个 README md 文件 在此 README md 文件中 我有一个链接 因此另一个 md 文件位于与 READ
  • Xampp-mysql - “引擎中不存在表”#1932

    移动 xampp 文件夹后出现 Xampp 错误 Apache 运行良好 如下图所示 我成功运行 apache 但无法运行 mysql 如果我移动并运行 xampp apache 和 mysql 但它显示的错误是新鲜的 并且显示类似 引擎中
  • 将 exec-maven-plugin 的输出分配给变量

    我想使用 exec maven plugin 来获取 git revision 所以我使用以下配置
  • 用于执行 python 脚本的 Vim 键映射

    我第一次尝试在 Vim 中映射命令 我希望它执行当前的 python 脚本 所以我将以下内容放入我的 vimrc noremap
  • 添加 $ 并舍入小数点后 2 位 SQL

    我正在寻找格式化由子查询创建的输出 该子查询生成一个计算字段 我希望将其格式化为 XX XX 子查询 select avg retail from cars where brand FORD or brand TOYOTA as AVG B
  • 使用 ICC 配置文件将 RGB 转换为 CMYK

    我即将将 RGB 颜色转换为 CMYK 以便打印 此转换的规模是 Adob e Photoshop Image gt Mode gt CMYK color 我尝试了 2 个解决方案 但没有一个返回正确的值 解决方案 1 使用 NET Fra
  • webpack --watch 不编译更改的文件

    我尝试跑步webpack watch编辑我的 JS 文件后 它不会触发自动重新编译 我尝试过重新安装webpack using npm uninstall但它仍然不起作用 有任何想法吗 如果您的代码没有被重新编译 请尝试增加观察者的数量 在
  • 何时使用后值[重复]

    这个问题在这里已经有答案了 在下面的一段代码中 viewModelScope launch isLoading postValue true 我们在主线程中 因为viewModelScope launch默认在主线程上运行 与viewMod
  • 使用自定义消息捕获和处理 Jackson 异常

    我希望能够捕获我正在开发的 spring boot API 中发生的一些 Jackson 异常 例如 我有以下请求类 我想捕获当 JSON 请求对象中的 questionnaireResponse 键为 null 或空白时发生的错误 即 在
  • 局部变量与实例变量

    我对使用 XNA 构建的游戏的 C 优化进行了大量研究 但我仍然不太明白局部变量是否是实例变量 在不断更新和使用时会提供更好的性能 根据http www dotnetperls com optimization http www dotne
  • T-SQL 存储过程 - 动态 AND/OR 运算符

    我只是想知道 MS SQL Server 2005 中是否有一种方法可以将运算符作为存储过程参数传递 如果可能的话 我确实需要避免使用动态 SQL AppOperator AND WHERE 1 1 AppOperator 2 2 这并不是
  • Cruise Control .Net 服务器无法检测在 Starteam 上完成的修改

    我正在使用 Cruise Control Net 1 4 进行持续集成 并将其安装在我的 Windows 2000 桌面上 我有 Nant 0 85 用于构建 我的源代码控制位于 Borland Starteam 2005 中 我安装了 N
  • 如何将照片库加载到UICollectionView中?迅速

    我正在努力实现的目标 对于这个项目 我只会提到两个源文件 1 RPPhotoLibrary swift UICollectionViewController 和 2 PhotoThumbnail swift UICollectionView
  • git push ...致命:无法创建master.lock:文件存在

    帮助 当我尝试做一个git push origin master现在 我得到 fatal Unable to create home ubuntu workspace git refs remotes origin master lock
  • Asp.net Core 中的@Html.EnumDropDownListFor

    我正在 Asp net Core 中移植 MVC5 应用程序 我找不到 Html EnumDropDownListFor 它是否已被弃用并且有替代品吗 有没有任何文档可以让我找到所有这些小的重大更改 对于仍在寻找答案的任何人 在 ASP N
  • 长按手势弹出菜单

    我对 ios 和核心动画都很陌生 所以我正在做一些测试来适应它 我有一个菜单 我试图通过长按手势来创建 我希望按钮先向上动画 然后向下动画 然后消失 我让出现的部分工作了 但我不知道如何让它消失 它也不允许我在 UIGestureRecog
  • 关闭从 WebView 打开的全屏视频后出现白屏

    我有一个WebView带有嵌入的 youtube 视频 我已经使用简单的对话框解决方案实现了全屏模式 如下所示 webView setWebChromeClient new CustomWebChromeClient public clas
  • highcharts 工具提示错误日期

    我制作了一个高图表 该工具提示以格式显示日期和时间 但它显示了错误的日期和时间 请仔细阅读下面的代码 HTML 代码 div style min width 310px height 400px margin 0 div