【发布时间】：2015-06-18 11:35:30
【问题描述】：
有没有办法让 Highcharts 工具提示出现在 SVG 容器之外并始终位于鼠标上方？
现在有时会在数据上方显示工具提示，因为它不适合数据点上方的容器。
【问题讨论】：
-
太棒了！我发现了一个似乎在 jsfiddle 中有效的示例：jsfiddle.net/vbddw4r0
标签： highcharts
【发布时间】：2015-06-18 11:35:30
【问题描述】：
太棒了！我发现了一个似乎适用于 jsfiddle 的示例：http://jsfiddle.net/vbddw4r0
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
min: 0
},
tooltip: {
enabled: true,
backgroundColor: "rgba(255,255,255,0)",
borderWidth: 0,
shadow: false,
useHTML: true,
formatter: function () {
return '<div class="tooltip"><b>' + this.series.name + '</b>' +
'<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '</div>';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
type: 'spline',
id: 'Total',
name: 'Total',
color: '#2788F4',
data: [{
id: 'Total-1361059200000',
x: 1361059200000,
y: 35.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361088000000',
x: 1361088000000,
y: 254.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361116800000',
x: 1361116800000,
y: 96.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361145600000',
x: 1361145600000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361174400000',
x: 1361174400000,
y: 40.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361203200000',
x: 1361203200000,
y: 117.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361232000000',
x: 1361232000000,
y: 10.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361260800000',
x: 1361260800000,
y: 206.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361289600000',
x: 1361289600000,
y: 351.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361318400000',
x: 1361318400000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361347200000',
x: 1361347200000,
y: 186.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361376000000',
x: 1361376000000,
y: 59.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361404800000',
x: 1361404800000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361433600000',
x: 1361433600000,
y: 211.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361462400000',
x: 1361462400000,
y: 104.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361491200000',
x: 1361491200000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361520000000',
x: 1361520000000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361548800000',
x: 1361548800000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361577600000',
x: 1361577600000,
y: 24.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361606400000',
x: 1361606400000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361635200000',
x: 1361635200000,
y: 108.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361664000000',
x: 1361664000000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361692800000',
x: 1361692800000,
y: 0.0,
marker: {
enabled: false
}
}]
}, {
type: 'spline',
name: 'Transparent',
color: 'rgba(255, 255, 255, 0.1)',
data: [{
x: 1361059200000,
y: 0.0,
marker: {
symbol: "square",
radius: 3,
fillColor: "#f2a8a8",
states: {
hover: {
radius: 3,
fillColor: "#f2a8a8"
}
}
}
}, {
x: 1361088000000,
y: 0.0,
marker: {
symbol: "square",
radius: 8,
fillColor: "#f2a8a8",
states: {
hover: {
radius: 8,
fillColor: "#f2a8a8"
}
}
}
}, {
x: 1361116800000,
y: 0.0,
marker: {
symbol: "square",
radius: 6,
fillColor: "#f2a8a8",
states: {
hover: {
radius: 6,
fillColor: "#f2a8a8"
}
}
}
}]
}]
});
});
});
【讨论】：