Highcharts GANTT图表工具提示鼠标悬停跟踪问题
默认情况下，Highcharts中的鼠标悬停跟踪会跟踪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 '<b>'+ tasks[this.y].name + '</b><br/>'+this.point.options.tooltip_data +'<br>' +
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);
});
2 个答案:
答案 0 :(得分：1)
它应该已在主分支上修复：http://jsfiddle.net/2xkfm87e/14/
修复将包含在下一个版本中。分支机构CDN的URL：
<script src="http://github.highcharts.com/highstock.js"></script>
答案 1 :(得分：0)
好的，我明白了。以下是可能遵循此路径的任何人的结果。 http://jsfiddle.net/rwsavoy/2xkfm87e/16/我仍然赞扬@PawełFus这个答案，因为他让我朝着正确的方向前进。谢谢Paweł！
此外，从Highcharts 4.1.5开始提供此功能。但是，在撰写本文时，最新版本的Highstocks（2.1.5）没有（从文档中，Highstocks包含大部分Highcharts功能）。
$(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 '<b>'+ this.point.options.name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2 )+ '<br>';
}
},
plotOptions: {
series: {
borderRadius: 5,
pointWidth: 10,
colorByPoint: true
}
},
series: series
});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？