javascript - 带有线形和水平条形图的同步工具提示定位

我在对齐条形图上的工具提示位置时遇到问题。如果所有图表都是折线图而不是条形/柱形图，则工具提示定位会很好。 Highcharts专家能否解决这个问题？

http://jsfiddle.net/yhenwtsb/1/

var charts = [],
  options1, options2;

function syncTooltip(container, p) {
  var i = 0;
  for (; i < charts.length; i++) {
    if (container.id != charts[i].container.id) {
      if (charts[i].tooltip.shared) {
        charts[i].tooltip.refresh([charts[i].series[0].data[p]]);
      } else {
        charts[i].tooltip.refresh(charts[i].series[0].data[p]);
      }
    }
  }
}

options1 = {
  chart: {
    type: "column",
    inverted: true
  },
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            syncTooltip(this.series.chart.container, this.x - 1);
          }
        }
      }
    }
  },
  xAxis: {
    type: 'datetime'
  }
};

options2 = {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            syncTooltip(this.series.chart.container, this.x - 1);
          }
        }
      }
    }
  },
  xAxis: {
    type: 'datetime'
  }
};



charts[0] = new Highcharts.Chart($.extend(true, {}, options1, {
  chart: {
    renderTo: 'container1',
    marginLeft: 40, // Keep all charts left aligned
  },
  tooltip: {
    shared: true,
    crosshairs: true,
    valueDecimals: 2
  },
  series: [{
    data: [
      [1, 29.9],
      [2, 71.5],
      [3, 106.4]
    ]
  }, {
    data: [
      [1, 59.9],
      [2, 91.5],
      [3, 136.4]
    ]
  }]
}));


charts[1] = new Highcharts.Chart($.extend(true, {}, options2, {
  chart: {
    renderTo: 'container2',
    marginLeft: 40, // Keep all charts left aligned
  },
  tooltip: {
    shared: false
  },
  series: [{
    data: [
      [1, 29.9],
      [2, 71.5],
      [3, 106.4]
    ]
  }]
}));

最佳答案

您可以将tooltip.followPointer设置为true并添加一个小插件来同步第二张图表：

(function(H) {
    H.wrap(H.Pointer.prototype, 'runPointActions', function(proceed, e, p) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        var tooltipPos = this.chart.tooltip.now;

        Highcharts.charts.forEach(function(chart) {
            if (chart !== this.chart) {
                chart.tooltip.updatePosition({
                    plotX: tooltipPos.x - chart.plotLeft,
                    plotY: tooltipPos.y - chart.plotTop
                });
            }
        }, this);
    });
}(Highcharts));

现场演示：http://jsfiddle.net/BlackLabel/2w9683gb/

API参考：https://api.highcharts.com/highcharts/tooltip.followPointer

文件：https://www.highcharts.com/docs/extending-highcharts

关于javascript - 带有线形和水平条形图的同步工具提示定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57249627/