Javascript Highcharts-对齐共享工具提示的日期时间序列

我有两个时间序列，我想“共享”工具提示。但是，我有一个问题，即每个系列只有第一个点对齐并共享工具提示。其余的点略微未对齐，因此无法同时显示在工具提示中

这把小提琴将有助于说明问题所在

如果将鼠标悬停在第一个点上，工具提示将显示两个系列的条目。但是下一个数据点在工具提示中只显示一个条目

我可以征求你的意见吗？为了共享工具提示，“对齐”两个系列，我错过了什么？很明显，仅仅加上这些是不够的

tooltip: {
        shared: true,
}

---

谢谢。

假设最终目标是根据一天中的时间比较两个不同的日期，并且假设数据点是定期的，或者足够接近并且可以伪造（即每小时1个点，或者每10分钟一个点，等等），我会采用不同的方法：

1） 使用单一日期。它可以是今天的日期，也可以是任何其他日期，这无关紧要，因为一天中的时间是日期字符串的重要部分

2） 使用

pointStart

和

pointInterval

属性设置正确的计时（基于人工日期，但以正确的时间间隔为基础）

3） 将每个数据系列的实际日期设置为系列名称，该名称将显示在图例和共享工具提示中，以正确显示每个数据集的日期

4） 使用x轴标签上的格式选项仅显示标签的时间部分，而不显示日期

通过这种方式，您无需使用第二个x轴，无需使用工具提示格式中的任何复杂内容，无需使用更复杂的数据结构，如您的注释（“{“y”：0.87，“realDateTime”：“25/12/2015 03:00”）），只需将适当的日期传递给每个系列的name属性

//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

例如：

[[当然，您可以根据需要使用任意多个不同的日期来执行此操作（尽管这些日期显然没有意义）：

---

]]

我知道这是一个老问题，但我发现另一种可行的方法是将数据重新格式化为CSV格式，并为数据添加导入

Highcharts网站上有一个演示，它几乎满足了您的要求（尽管嵌套在ajax请求中）。其中的两个关键部分是：

<script src="https://code.highcharts.com/modules/data.js"></script>

---

该示例读取实际的csv文件，但它将接受格式类似的任何字符串。此外，如果在该csv字符串中设置标题，则无需在序列选项中声明标题名称。

通常，共享工具提示应具有完全相同的应用日期（x值）。我会说，这可能是第一点的错误，因为它认为这些点是相同的。无论如何，我会使用不同的解决方案：禁用

共享

选项并在

工具提示中。格式化程序

查找对应点。您可以找到一些建议来创建这样的工具提示。@Pawel Fus。谢谢你的指点。现在我来看看。这些点不是“稍微错位”——它们是两个不同轴上的两个完全不同的日期：）如果目标是在一天中比较两个不同的日期（看起来可能是从小提琴上），我会做不同的事——将每个系列的日期设置为相同，并使用格式化程序显示每个系列的正确日期。这样可以避免双轴，这必然会造成混乱。然后，如果您确保每天的时间与每个系列相匹配，共享工具提示将按预期方式工作。@jlbiggs-我也这么认为，但要找到合适的日期可能有点困难。请参阅xAxis的

ordinal

选项，禁用该选项后，将显示真实数据的外观。我不确定查找正确日期是什么意思？我经常使用这种方法（通常是比较两年，但概念与两天相同：哦，我只注意到了第二把小提琴。是的，系列太多了，但我可能有5个左右的系列，这将是展示它们的一个很好的方式。我很尴尬地说，我没有探索“面积”图表。对于一个问题，我认为我“过度思考”了我的从您的解决方案中获益匪浅。再次感谢您。仅在某些情况下，区域才有意义。对于这一点，我会犹豫是否超出三个或更多系列，但如果您希望根据任意数量的系列（即：）的历史比较基础显示最近的一两个日期，则可以添加更多。乐意提供帮助。

<script src="https://code.highcharts.com/modules/data.js"></script>

data: {
    csv: csvData
}