javascript - 水平同步 Highcharts 问题

Question

我正在尝试使用此处 Highcharts 中的示例代码在我的应用程序中实现同步图表:

https://www.highcharts.com/demo/synchronized-charts

我有一个使用 Materialize 框架的列布局，并且图表并排放置在一行中。在尝试了一些 Highcharts 示例后，图表的水平行为似乎与垂直行为不同。图表中的标签不同步，十字准线也不同步移动。

经过一些阅读后，我发现以前也有人问过类似的问题:

Highcharts Sync charts horizontally

但是，正如有人在“标记正确”答案的评论中指出的那样，该解决方案不适用于像我这样的响应式图表。建议此人提出一个单独的 SO 问题，但由于我找不到它，所以我问它。

到目前为止，这是我可以让图表正常工作的最接近的结果:

https://jsfiddle.net/6h7aL2rw/1/

但是，当您将光标移动到第一个图表的末尾时，您可以看到，工具提示和十字准线并未完全同步，并且在每个图表上落后了几个点。

我对原始示例进行更改的代码如下:

$('#container').bind('mousemove touchmove touchstart', function (e) {
            var chart,
                point,
                i,
                event;

            for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                chart = Highcharts.charts[i];
                event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart

                event.chartX = (event.chartX + 3 * $('.chart').width()) % $('.chart').width();

                point = chart.series[0].searchPoint(event, true); // Get the hovered point
                if (point) {
                    point.highlight(e);
                }
            }
        });

正如原始问题中所指出的，我不明白这样做的意义:

event.chartX + 3 * $('.chart').width()

但我觉得正是这段代码导致了图表无法同步。

Answer 1

该问题是由图表之间的间隙引起的，请检查没有它们的示例:https://jsfiddle.net/BlackLabel/5Lgrc08z/

作为解决方案，您可以将 event.chartX 设置为 e.offsetX:

$('#container').bind('mousemove touchmove touchstart', function(e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart

        event.chartX = e.offsetX;

        point = chart.series[0].searchPoint(event, true); // Get the hovered point
        if (point) {
            point.highlight(e);
        }
    }
});

<小时/>

现场演示: https://jsfiddle.net/BlackLabel/ts7w4kxu/