Highchart / Highstock显示启用但未使用数据分组时未格式化的工具提示标签

时间:2017-11-30 00:15:55

标签: javascript highcharts highstock

在Highcharts / Highstock中使用带有日期时间的数据分组时,工具提示标签的格式似乎存在问题。

当实际应用数据分组时(即当图表中有这么多数据点时,每个数据点的宽度都会低于dataGrouping.groupPixelWidth),工具提示的标签是使用{{1}创建的。配置选项。

但是,如果未应用分组,例如当缩放太多以至于每个数据点宽度都超出限制时,工具提示的标签根本不会格式化。对于日期时间轴,将显示日期的原始字符串值(与dataGrouping.dateTimeLabelFormats相同)。设置date.toString()无济于事。

禁用数据分组时也可能出现这种情况。

看到这个小提琴:https://jsfiddle.net/Jelmerjellema/v3obp9h3/

  • 胡扯数据并检查工具提示:它显示格式正确的日期时间范围。
  • 通过选择图表的一部分放大,直到您看到四分之一小时的数据。这是基本的未分组数据。工具提示现在显示格式错误的数据。

    解决方法
    我设法通过确保始终使用分组来解决这个问题。我的原始数据是15分钟,所以我确保tooltip.xDateFormat包含15分钟的块。然后我将dataGrouping.units设置为dataGrouping.forced。这感觉就像一个坏技巧,因为当传入的数据变为5分钟时,图表将永远不会显示原始数据。

    启用dateGrouping但未使用时,是否有更好的方法在工具提示中格式化x值?

    谢谢!

  • 1 个答案:

    答案 0 :(得分:1)

    此问题的原因是您使用 moment.js 日期而不是时间戳作为您的积分的x值。

    我将 moment.js 替换为标准Date.UTCDate.now函数(它们返回时间戳),一切正常:

     //create timedata
     var data = [];
     var m = Date.UTC(2016);
     var until = Date.now();
    
     while (m < until) {
    
       data.push({
         x: m,
         y: Math.floor(Math.random() * 1000)
       });
       m += 15 * 60 * 1000;
     }
    

    现场演示: https://jsfiddle.net/kkulig/dLq34dkt/

    文档参考: https://www.highcharts.com/docs/chart-concepts/axes日期时间段落)