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 
    }] 
    }); 
}; 
});