具有定位的多轴图表未显示 Highcharts 共享工具提示

Question

我有一个带有多个 y 轴的图表。我已使用顶部选项将一张图表移至底部。当我将鼠标悬停在移动到底部的图表上时，不会出现共享工具提示。当我将鼠标悬停在条形图上方的空间上时。条和 100 之间的空间（在 Y 轴上），工具提示不会出现。将鼠标悬停在栏右侧或左侧的空间上，不会出现工具提示。

我不想让图表处于默认位置。当我将两个图表分开时，它看起来更干净。下移图形时，我可以使共享工具提示起作用吗？

我的代码： yAxis: [{ top: 148 }, { top: 0 }], tooltip: { shared: true, crosshairs: { color: 'rgba(27,161,218,0.5)', dashStyle: 'solid', zIndex: -1 } },

这里是小提琴：multi-axes graph with positioning

任何意见表示赞赏。 谢谢

Answer 1

看看使用同步图表。

http://www.highcharts.com/demo/synchronized-charts

JSFiddle 已更新为使用同步图表。 JSFiddle

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

  if (point) {
    point.highlight(e);
  }
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
}; 

/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;

if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
  Highcharts.each(Highcharts.charts, function(chart) {
    if (chart !== thisChart) {
      if (chart.xAxis[0].setExtremes) { // It is null while updating
        chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
          trigger: 'syncExtremes'
        });
      }
    }
  });
}
}

var dataset = [{
"name": "Series 1",
"type": "column",
"data": [29.9, 71.5, 106.4]
}, {
"name": "Series 2",
"type": "line",
"data": [216.4, 194.1, 95.6]
}];

for (var i = 0; i < dataset.length; i++) {
var dataitem = dataset[i];
$("<div class=\"chart\">")
  .appendTo('#container').highcharts({
    title: {
        text: dataitem.name
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar']
    },
    tooltip: {
      crosshairs: {
        color: 'rgba(27,161,218,0.5)',
        dashStyle: 'solid',
        zIndex: -1
      }
    },
    series: [{
      data: dataitem.data,
      name: dataitem.name,
      type: dataitem.type
    }]
  });
};
});