Highcharts-同步不同宽度图表的交叉线

我尝试为多个高度图表获得一个同步十字线，每个高度图表的宽度不同

如需了解，十字线在光标位置上同步，而不是在点/X轴值的位置上同步（首选）。有谁能给我一个如何实现这一点的提示吗

我已更改了以下小提琴中的同步图表示例：

图表创建：

$.each(activity.datasets, function (i, dataset) {

        // Add X values
        dataset.data = Highcharts.map(dataset.data, function (val, j) {
            return [activity.xData[j], val];
        });

        $('<div class="chart">')
            .appendTo('#container')
            .highcharts({
                chart: {
                    marginLeft: 40+i*100, // make different width for each chart
                    spacingTop: 20,
                    spacingBottom: 20
                },

$.each（activity.dataset，function（i，dataset）{
//添加X个值
dataset.data=Highcharts.map（dataset.data，函数（val，j）{
返回[activity.xData[j]，val]；
});
$('')
.appendTo（“#container”）
.海图({
图表：{
marginLeft:40+i*100，//为每个图表制作不同的宽度
间距：20，
间距：20
},

同步代码

$('#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];
        // Find coordinates within the chart
        event = chart.pointer.normalize(e.originalEvent);
        // Get the hovered point
        point = chart.series[0].searchPoint(event, true);

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

$（“#容器”）.bind（'mousemove touchtmove touchtstart'，函数（e）{
var图，
指向
我
事件
对于（i=0；i

---

谢谢

在这里，您可以找到一个基于xAxis值同步多个图表的示例：

在多个图表上同步绘制线的代码：

function syncronizeCrossHairs(chart) {
    var container = jQuery(chart.container),
        offset = container.offset(),
        x, y;

    container.mousemove(function(evt) {
        x = evt.clientX - chart.plotLeft - offset.left;
        y = evt.clientY - chart.plotTop - offset.top;

        var val = chart.xAxis[0].translate(x, true);

        Highcharts.each(Highcharts.charts, function (act_chart) {
            var xAxis = act_chart.xAxis[0];
            xAxis.removePlotLine("myPlotLineId");
            xAxis.addPlotLine({
                value: val,
                width: 1,
                color: 'red',
                //dashStyle: 'dash',                   
                id: "myPlotLineId"
            });
        });
   });
}

---

您可以使用上面示例中的代码，在不同的图表上实现此解决方案并不困难。绘制线模拟十字线，您可以根据需要自定义其样式。