我正在尝试像这样做一些范围折线图http://jsfiddle.net/uazvokx4/。
$(function () {
var ranges1 = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6],
[1246665600000, 16.7, 30.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 25.7],
[1246924800000, 13.5, 24.8],
[1247011200000, 10.5, 21.4],
[1247097600000, 9.2, 23.8],
[1247184000000, 11.6, 21.8]
],
averages1 = [
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23],
[1246665600000, 23.8],
[1246752000000, 21.4],
[1246838400000, 21.3],
[1246924800000, 18.3],
[1247011200000, 15.4],
[1247097600000, 16.4],
[1247184000000, 17.7]
],
ranges2 = [
[1246406400000, 16.3, 28.7],
[1246492800000, 16.5, 27.1],
[1246579200000, 17.5, 26.6],
[1246665600000, 18.7, 28.7],
[1246752000000, 20.5, 30.0],
[1246838400000, 19.8, 31.7],
[1246924800000, 15.5, 27.8],
[1247011200000, 12.5, 26.4],
[1247097600000, 13.2, 28.8],
[1247184000000, 11.6, 25.8]
],
averages2 = [
[1246406400000, 25.5],
[1246492800000, 23.1],
[1246579200000, 22],
[1246665600000, 26.8],
[1246752000000, 27.4],
[1246838400000, 28.3],
[1246924800000, 22.3],
[1247011200000, 23.4],
[1247097600000, 21.4],
[1247184000000, 18.7]
];
$('#container').highcharts({
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Temperature',
data: averages1,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges1,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
},{
name: 'Temperature2',
data: averages2,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1]
}
}, {
name: 'Range2',
data: ranges2,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[1],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
我目前已将工具提示设置为使用共享数据，但它显示所有系列。我想知道是否有一种方法可以链接线和范围，所以我只能显示该对而不是图表中的所有系列。
答案 0 :(得分：1)
您可以使用tooltip.formatter来自定义弹出窗口的内容。在内部函数中，您可以使用循环来查找相关系列等。
答案 1 :(得分：0)
我会通过在您不希望在工具提示中显示的系列中设置enableMouseTracking:false来实现此目的。
示例：
参考：
已更新评论
那么，您想要主系列的个别工具提示，但是您想要将相关范围与它们分组？
您需要使用formatter()功能。可能有很多方法可以实现，但我用这个完成了它：
formatter: function() {
var ser = this.series.name;
var i = this.point.index;
var rangeSer = ser == 'Temperature' ? 1 : 3;
var range = this.series.chart.series[rangeSer].data[i];
return ser + ': '+ this.y + '°C'
+ '<br/>Range: '+ range.low + '°C'
+ ' - '
+ range.high + '°C';
}
检查您所在的系列，指定相应的范围，然后获取相应的数据点。
示例：