Question

我在2行中有6个图表，带有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变量sync可以正常工作，但是不能正常工作。我在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/

Highcharts同步无法水平运行

1 个答案: