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

Question

我在调整条形图上的工具提示位置时遇到问题。如果所有图表都是折线图但不适用于条形图/柱形图，则工具提示定位效果很好。 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]
    ]
  }]
}));

Answer 1

您可以将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