Highcharts - 对齐共享工具提示的dateTime系列 [英] Highcharts - Aligning dateTime series for shared tooltip
问题描述
我有两个时间序列，我想分享工具提示。但是，我有一个问题，只有每个系列的第一个点对齐并共享工具提示。剩下的分数略有偏差，因此无法同时显示在工具提示中。
这个小提示将有助于证明问题。 小提琴
如果你将鼠标悬停在第一点，tooltip出现两个系列的条目。但是下一个数据点只会在工具提示中显示一个条目。
请问您的建议吗？为了分享这个工具提示，我错过了对齐这两个系列？显然，仅仅添加
工具提示是不够的：{b $ b shared：true，
}
谢谢。
1）使用单一日期。它可以是今天的日期，或任何其他日期，这并不重要，因为一天中的时间是日期字符串的重要部分。
2）使用 pointStart 和 pointInterval 属性来设置适当的时间（基于人造日期，但是正确的时间间隔） 3）将每个数据系列的实际日期设置为系列名称，这将显示在图例和共享工具提示中，以正确显示每个数据集的日期。 p>
4）使用x轴标签上的格式选项仅显示标签的时间部分而不显示日期
<通过这种方式，您可以删除第二个x轴的需要，消除工具提示格式化中的任何复杂情况，不需要使用更复杂的数据结构，如评论（{y：0.87，realDateTime：'25 / 12/2015 03:00'}），并且只需将相应的日期传递给每个系列的名称属性即可。
//使用当前的数据e作为基础 - 日期无关紧要，只是时间
var d = new Date（）;
var date = new Date（d.getFullYear（），d.getMonth（），d.getDate（），0,0,0）;
var pointStart = date.getTime（）;
var pointInterval = 3600 * 1000 // 1小时
。
系列：[{
name：'Apr 17，2015'，
data：[2,5,8,9， 8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
}，{
名称：'2015年6月12日'，
数据：[3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6 ，9,8,7,4,5,6,3]
}]
例如：
<[>当然，您可以使用as许多不同的日期（尽管这很明显没有意义）：
]]
I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.
This fiddle will help demonstrate the problem. Fiddle
If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.
May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add
tooltip: {
shared: true,
}
Thank you.
Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:
1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.
2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)
3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.
4) use the formatting options on the x axis labels to show only the time portion of the label and not the date
In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.
//use the current date as the base - the date doesn't matter, just the time
var d = new Date();
var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour
.
series: [{
name : 'Apr 17, 2015',
data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
name : 'Jun 12, 2015',
data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]
Example:
[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):
]]
这篇关于Highcharts - 对齐共享工具提示的dateTime系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
