Highcharts - 为共享工具提示对齐日期时间序列答案

【问题标题】：Highcharts - Aligning dateTime series for shared tooltipHighcharts - 为共享工具提示对齐日期时间序列
【发布时间】：2018-03-23 06:50:10
【问题描述】：

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

这个小提琴将帮助演示这个问题。 Fiddle

如果您将鼠标悬停在第一个点上，则会出现工具提示，其中包含两个系列的条目。但是下一个数据点仅在工具提示中显示一个条目。

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

tooltip: {
        shared: true,
}

谢谢。

【问题讨论】：

一般来说，共享工具提示应该具有完全相同的日期（x 值）来应用。我会说，这可能是第一点的错误，因为它认为点是相同的。无论如何，我会使用不同的解决方案：禁用shared 选项并在tooltip.formatter 中找到对应点。 Here 你可以找到一些建议来创建这样的工具提示。
@Pawel Fus。谢谢你的指点。现在就去看看。
这些点并没有“稍微错位”——它们是两个不同轴上的两个完全不同的日期:) 如果目标是在一天中比较两个不同的日期（看起来可能来自小提琴），我会以不同的方式执行此操作 - 将每个系列的日期设置为相同，并使用格式化程序显示每个系列的正确日期。这样就可以避免双轴，这势必造成混乱。然后，如果您确保每个系列的时间匹配，共享工具提示将按预期方式工作。
@jlbriggs - 我也是这么想的，但是找到合适的日期可能有点困难。请参阅 xAxis 的 ordinal 选项，禁用该选项后，将显示真实数据的外观。
我不确定您所说的找到合适的日期是什么意思？我经常使用这种方法（通常是比较两年，但概念与两天相同：jsfiddle.net/jlbriggs/b3t7ueam

标签： javascript jquery highcharts

【解决方案1】：

假设最终目标是根据一天中的时间比较两个不同的日期，并假设数据点是固定间隔的，或者足够接近并且可以捏造（即每小时 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

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]
}]

例子：

http://jsfiddle.net/jlbriggs/b3t7ueam/

[[当然，您可以根据需要使用尽可能多的不同日期（尽管这么多显然没有意义）：

http://jsfiddle.net/jlbriggs/v76u9w2L/

]]

【讨论】：

哦。刚刚注意到第二把小提琴。是的，系列太多了，但我可能有 5 个左右的系列，这将是展示它们的好方法。我很尴尬地说我没有探索过“面积”图表。对于我认为我已经“过度思考”的问题，我从您的解决方案中学到了很多东西。再次感谢您。
区域仅对某些场景有意义。我会犹豫是否要超出三个左右的系列，但如果您想根据任意数量系列的历史比较基础显示最近的一两个日期（即：jsfiddle.net/jlbriggs/b3t7ueam/14），可以添加更多。乐于助人。

【解决方案2】：

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

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

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

和

data: {
    csv: csvData
}

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

【讨论】：