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/

水平同步高图问题

1 个答案: