javascript - Highcharts 同步不水平工作

Question

我有 6 个图表，分为 2 行和 3 个引导列网格。我正在尝试同步所有 6 个图表，但它不起作用，如果我的图表处于垂直位置，它会起作用，但我必须在 2 行(水平)中显示这些图表。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.highcharts.com/stock/highstock.js"></script>
                    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<div id="container">
        <div class="row">
            <div class="col-md-4">
                <div id="container_1" style="height: 400px"></div>
            </div>
            <div class="col-md-4">
                <div id="container_2" style="height: 400px"></div>
            </div>
            <div class="col-md-4">
                <div id="container_3" style="height: 400px"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div id="container_4" style="height: 400px"></div>
            </div>
            <div class="col-md-4">
                <div id="container_5" style="height: 400px"></div>
            </div>
            <div class="col-md-4">
                <div id="container_6" style="height: 400px"></div>
            </div>
        </div>
    </div>

水平同步不起作用。我看过这个link

但在此我们必须设置 chartX 变量，如果我设置此变量同步将起作用，但这不能正常工作。我在docs看到过对于 chartX，但我无法理解应该设置什么值才能正常工作

这是我的 jsfiddle 的链接 请告诉我如何使这些水平图表同步，或者我应该设置什么值才能使 ChartX 正常工作，因为响应性正在改变宽度。

谢谢，

请增加 JSFIDDLE 结果框的宽度以连续显示图表。

Answer 1

不同之处在于您的图表之间存在差距。作为解决方案，您可以找到哪个图表列悬停并创建一个通用的 event 变量:

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

    for (i = 0; i < 3; i++) {
        chart = Highcharts.charts[i];
        if (chart && chart.options.chart.isSynced) {
            // Find coordinates within the chart
            event = chart.pointer.normalize(e.originalEvent);

            if (event.chartX > 0 && event.chartX < chart.chartWidth) {
                Highcharts.charts.forEach(function(ch) {
                    point = ch.series[0].searchPoint(event, true);

                    if (point) {
                        point.highlight(e);
                    }
                });

                break;
            }
        }
    }
});

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