Highcharts GANTT图表工具提示鼠标hover跟踪问题

默认情况下，Highcharts中的鼠标hover跟踪会跟踪x轴上的最近点。 这适用于其他类型的图表，但是，使用我的GANTT图表[ http://jsfiddle.net/2xkfm87e/11/ ]，这会导致最终用户的结果不直观。 在下面的示例图像中，请注意光标最接近第一个类别8段。 但是，类别4段的第1点是x轴上的最近点，这是渲染的工具提示。 我需要将跟踪重点放在y轴上，这样如果光标最接近y轴上的一个点，则会渲染该工具提示。

这可能吗？ 谢谢你的帮助！

$(function () { // Define tasks var tasks = [{ name: 'Category 1', intervals: [] }, { name: 'Category 2', intervals: [{ // From-To pairs from: Date.UTC(2010,5, 21), to: Date.UTC(2015, 5, 21), label: 'Category 2', tooltip_data: 'this data' }] }, { name: 'Category 3', intervals: [{ // From-To pairs from: Date.UTC(2011,05,16), to: Date.UTC(2012,03,21 ), label: 'Category 3', tooltip_data: 'this data' }, { from: Date.UTC(2013,07,09), to: Date.UTC(2015,05,22), label: 'Category 3', tooltip_data: 'this data' }] }, { name: 'Category 4', intervals: [{ // From-To pairs from: Date.UTC(2013,07,18 ), to: Date.UTC(2015,05,22), label: 'Category 4', tooltip_data: 'this data' }] }, { name: 'Category 5', intervals: [{ // From-To pairs from: Date.UTC(2013,06,17), to: Date.UTC(2014,04,21), label: 'Category 5', tooltip_data: 'this data' }, { from: Date.UTC(2015,01,22), to: Date.UTC(2015,05,22), label: 'Category 5', tooltip_data: 'this data' }] }, { name: 'Category 6', intervals: [{ // From-To pairs from: Date.UTC(2013,06,17), to: Date.UTC(2014,04,21), label: 'Category 6', tooltip_data: 'this data' }, { from: Date.UTC(2015,01,22), to: Date.UTC(2015,05,22), label: 'Category 6', tooltip_data: 'this data' }] }, { name: 'Category 7', intervals: [{ // From-To pairs from: Date.UTC(2013,06,17), to: Date.UTC(2014,04,21), label: 'Category 7', tooltip_data: 'this data' }, { from: Date.UTC(2015,01,22), to: Date.UTC(2015,05,22), label: 'Category 7', tooltip_data: 'this data' }] }, { name: 'Category 8', intervals: [{ // From-To pairs from: Date.UTC(2013,06,17), to: Date.UTC(2014,04,21), label: 'Category 8', tooltip_data: 'this data' }, { from: Date.UTC(2015,01,22), to: Date.UTC(2015,05,22), label: 'Category 8', tooltip_data: 'this data' }] }, { name: 'Category 9', intervals: [{ // From-To pairs from: Date.UTC(2013,06,17), to: Date.UTC(2014,04,21), label: 'Category 9', tooltip_data: 'this data' }, { from: Date.UTC(2015,01,22), to: Date.UTC(2015,05,22), label: 'Category 9', tooltip_data: 'this data' }] }]; // re-structure the tasks into line seriesvar series = []; var series = []; $.each(tasks.reverse(), function(i, task) { var item = { name: task.name, data: [] }; $.each(task.intervals, function(j, interval) { item.data.push({ x: interval.from, y: i, label: interval.label, from: interval.from, to: interval.to, tooltip_data: interval.tooltip_data }, { x: interval.to, y: i, from: interval.from, to: interval.to, tooltip_data: interval.tooltip_data }); // add a null value between intervals if (task.intervals[j + 1]) { item.data.push( [(interval.to + task.intervals[j + 1].from) / 2, null] ); } }); series.push(item); }); // restructure the milestones /*$.each(milestones, function(i, milestone) { var item = Highcharts.extend(milestone, { data: [[ milestone.time, milestone.task ]], type: 'scatter' }); series.push(item); }); */ // create the chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, title: { text: 'Category History' }, xAxis: { type: 'datetime' }, yAxis: { min:0, max:8, categories: ['Category 9', 'Category 8', 'Category 7', 'Category 6', 'Category 5', 'Category 4', 'Category 3', 'Category 2', 'Category 1'], tickInterval: 1, tickPixelInterval: 200, labels: { style: { color: '#525151', font: '12px Helvetica', fontWeight: 'bold' } }, startOnTick: false, endOnTick: false, title: { text: 'Criteria' }, minPadding: 0.2, maxPadding: 0.2, fontSize:'15px' }, legend: { enabled: false }, tooltip: { formatter: function() { return ''+ tasks[this.y].name + '
'+this.point.options.tooltip_data +'
' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) + ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); } }, plotOptions: { line: { lineWidth: 10, marker: { enabled: false }, dataLabels: { enabled: true, align: 'left', formatter: function() { return this.point.options && this.point.options.label; } } } }, series: series }); console.log(series); }); 

Answer 1

它应该已经在主分支上修复： http ： //jsfiddle.net/2xkfm87e/14/

修复将包含在下一个版本中。 分支机构CDN的URL：

Answer 2

好的，我搞定了。 以下是可能遵循此路径的任何人的结果。 http://jsfiddle.net/rwsavoy/2xkfm87e/16/我仍然赞扬@PawełFus这个答案，因为他让我朝着正确的方向前进。 谢谢Paweł！

此外，从Highcharts 4.1.5开始提供此function。 但是，在撰写本文时，最新版本的Highstocks（2.1.5）没有（从文档中，Highstocks包含大部分Highchartsfunction）。

  $(function () { /** * Highcharts X-range series plugin */ (function (H) { var defaultPlotOptions = H.getOptions().plotOptions, columnType = H.seriesTypes.column, each = H.each; defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {}); H.seriesTypes.xrange = H.extendClass(columnType, { type: 'xrange', parallelArrays: ['x', 'x2', 'y'], animate: H.seriesTypes.line.prototype.animate, /** * Borrow the column series metrics, but with swapped axes. This gives free access * to features like groupPadding, grouping, pointWidth etc. */ getColumnMetrics: function () { var metrics, chart = this.chart, swapAxes = function () { each(chart.series, function (s) { var xAxis = s.xAxis; s.xAxis = s.yAxis; s.yAxis = xAxis; }); }; swapAxes(); this.yAxis.closestPointRange = 1; metrics = columnType.prototype.getColumnMetrics.call(this); swapAxes(); return metrics; }, translate: function () { columnType.prototype.translate.apply(this, arguments); var series = this, xAxis = series.xAxis, yAxis = series.yAxis, metrics = series.columnMetrics; H.each(series.points, function (point) { barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX; point.shapeArgs = { x: point.plotX, y: point.plotY + metrics.offset, width: barWidth, height: metrics.width }; point.tooltipPos[0] += barWidth / 2; point.tooltipPos[1] -= metrics.width / 2; }); } }); /** * Max x2 should be considered in xAxis extremes */ H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) { var axis = this, dataMax = Number.MIN_VALUE; proceed.call(this); if (this.isXAxis) { each(this.series, function (series) { each(series.x2Data || [], function (val) { if (val > dataMax) { dataMax = val; } }); }); if (dataMax > Number.MIN_VALUE) { axis.dataMax = dataMax; } } }); }(Highcharts)); var series= [{ data: [ { name: 'Catergory 1', x: Date.UTC(2009,3,15), x2: Date.UTC(2015,5,11), y:8, tooltip_data:'', color:'#f45b5b' } , { name: 'Catergory 2', x: Date.UTC(2013,10,12), x2: Date.UTC(2014,6,17), y:7, tooltip_data:'Catergory 2 A', color:'#2b908f' } , { name: 'Catergory 2', x: Date.UTC(2014,6,18), x2: Date.UTC(2015,5,11), y:7, tooltip_data:'', color:'#2b908f' } , { name: 'Catergory 3', x: Date.UTC(2009,6,21), x2: Date.UTC(2015,5,11), y:6, tooltip_data:'', color:'#e4d354' } , { name: 'Catergory 4', x: Date.UTC(2011,8,29), x2: Date.UTC(2015,5,11), y:5, tooltip_data:'', color:'#f15c80' } , { name: 'Catergory 7', x: Date.UTC(2009,3,15), x2: Date.UTC(2014,6,17), y:2, tooltip_data:'Tooltip Catergory 7 A', color:'#90ed7d' } , { name: 'Catergory 7', x: Date.UTC(2014,6,18), x2: Date.UTC(2015,5,11), y:2, tooltip_data:'', color:'#90ed7d' } , { name: 'Catergory 8', x: Date.UTC(2009,6,16), x2: Date.UTC(2015,5,11), y:1, tooltip_data:'', color:'#434348' } , { name: 'Category 9', x: Date.UTC(2009,3,15), x2: Date.UTC(2015,5,11), y:0, tooltip_data:'', color:'#7cb5ec' }] }]; // THE CHART $('#container').highcharts({ chart: { type: 'xrange' }, title: { text: 'Category History', style: { color: '#525151', font: '20px Helvetica', fontWeight: 'bold' } }, xAxis: { type: 'datetime', dateTimeLabelFormats:{ month: '%b - %Y' }, labels: { style: { color: '#525151', font: '12px Helvetica', fontWeight: 'bold' } }, startOnTick: true, tickmarkPlacement: 'on', tickInterval: 3 * 30 * 24 * 3600 * 1000, endOnTick: true, minPadding: 0, maxPadding: 0, gridLineWidth: 1 }, yAxis: { min:0, useHTML: true, categories: ['Category 9', 'Category 8', 'Category 7', 'Category 6', 'Category 5', 'Category 4', 'Category 3', 'Category 2', 'Category 1'], tickInterval: 1, tickPixelInterval: 200, labels: { style: { color: '#525151', font: '12px Helvetica', fontWeight: 'bold' } }, startOnTick: false, endOnTick: false, title: { text: 'Criteria', style: { color: '#525151', font: '15px Helvetica', fontWeight: 'bold' } }, minPadding: 0.2, maxPadding: 0.2 }, legend: { enabled: false }, tooltip: { formatter: function() { return ''+ this.point.options.name + '
' + this.point.options.tooltip_data + '
' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) + ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2 )+ '
'; } }, plotOptions: { series: { borderRadius: 5, pointWidth: 10, colorByPoint: true } }, series: series }); });