启用数据分组但未使用时,Highchart / Highstock 显示未格式化的工具提示标签
Highchart / Highstock shows unformated tooltip lable when data grouping enabled but not used
在 Highcharts / Highstock 中使用带日期时间的数据分组时,工具提示标签的格式似乎有问题。
当实际应用数据分组时(即当图表中的数据点太多以至于每个数据点的宽度都低于 dataGrouping.groupPixelWidth
)时,工具提示的标签是使用 dataGrouping.dateTimeLabelFormats
配置选项。
但是当不应用分组时,例如当缩放到每个数据点宽度超过限制时,工具提示的标签根本没有格式化。在日期时间轴的情况下,将显示日期的原始字符串值(与 date.toString()
相同)。设置 tooltip.xDateFormat
没有帮助。
禁用数据分组时也可能出现这种情况。
看到这个fiddle:https://jsfiddle.net/Jelmerjellema/v3obp9h3/
将鼠标悬停在数据上并检查工具提示:它显示了格式正确的日期时间范围。
通过选择图表的一部分来放大,直到您看到一刻钟的数据。这是基本的未分组数据。工具提示现在显示格式错误的数据。
解决方法
我设法通过确保始终使用分组来解决这个问题。我的原始数据是 15 分钟,所以我确保 dataGrouping.units
包含 15 分钟的块。然后我将 dataGrouping.forced
设置为 true
。这感觉像是一个糟糕的技巧,因为当传入数据变为 5 分钟块时,图表将永远不会显示原始数据。
当 dateGrouping 启用但未使用时,是否有更好的方法来格式化工具提示中的 x 值?
谢谢!
出现此问题的原因是您使用 moment.js 日期而不是 timestamps 作为积分的 x 值。
我用标准 Date.UTC
和 Date.now
函数(它们 return 时间戳)替换了 moment.js 并且一切正常应该:
//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(日期时间段落)
在 Highcharts / Highstock 中使用带日期时间的数据分组时,工具提示标签的格式似乎有问题。
当实际应用数据分组时(即当图表中的数据点太多以至于每个数据点的宽度都低于 dataGrouping.groupPixelWidth
)时,工具提示的标签是使用 dataGrouping.dateTimeLabelFormats
配置选项。
但是当不应用分组时,例如当缩放到每个数据点宽度超过限制时,工具提示的标签根本没有格式化。在日期时间轴的情况下,将显示日期的原始字符串值(与 date.toString()
相同)。设置 tooltip.xDateFormat
没有帮助。
禁用数据分组时也可能出现这种情况。
看到这个fiddle:https://jsfiddle.net/Jelmerjellema/v3obp9h3/
解决方法
我设法通过确保始终使用分组来解决这个问题。我的原始数据是 15 分钟,所以我确保 dataGrouping.units
包含 15 分钟的块。然后我将 dataGrouping.forced
设置为 true
。这感觉像是一个糟糕的技巧,因为当传入数据变为 5 分钟块时,图表将永远不会显示原始数据。
当 dateGrouping 启用但未使用时,是否有更好的方法来格式化工具提示中的 x 值?
谢谢!
出现此问题的原因是您使用 moment.js 日期而不是 timestamps 作为积分的 x 值。
我用标准 Date.UTC
和 Date.now
函数(它们 return 时间戳)替换了 moment.js 并且一切正常应该:
//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(日期时间段落)