在SVG容器外部显示Highcharts工具提示
有没有办法让Highcharts工具提示在SVG容器外部始终位于鼠标上方在SVG容器外部显示Highcharts工具提示,highcharts,Highcharts,有没有办法让Highcharts工具提示在SVG容器外部始终位于鼠标上方 现在工具提示有时会显示在数据上，因为它不适合数据点上方的容器。太好了！我发现了一个在JSFIDLE中似乎有效的示例： $（函数（）{ var图； $（文档）.ready（函数（）{ 图表=新的高点图表。图表({ 图表：{ renderTo:'容器'， 类型：“行” }, xAxis：{ 键入：“日期时间” }, 亚克斯：{ 标题：{ 文字：“温度（°C）” }, 最低：0 }, 工具提示：{ 启用：对， 背景色：“rgba
现在工具提示有时会显示在数据上，因为它不适合数据点上方的容器。太好了！我发现了一个在JSFIDLE中似乎有效的示例：
$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：“行”
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文字：“温度（°C）”
},
最低：0
},
工具提示：{
启用：对，
背景色：“rgba（255255,0）”，
边框宽度：0，
影子：错，
是的，
格式化程序：函数（）{
返回“”+this.series.name+“”+
“
”+Highcharts.dateFormat（“%b%e，%H:%M'，this.x）+:“+this.y++”
”+Highcharts.dateFormat（“%b%e，%H:%M'，this.x）+:“+this.y++”
”+Highcharts.dateFormat（“%b%e，%H:%M'，this.x）+:“+this.y++”
”+Highcharts.dateFormat（“%b%e，%H:%M'，M'，this.x）+:“+high.y++”
”（'%b%e，%H:%M'，this.x）+'：'+this.y++'
'+Highcharts.dateFormat（'%b%e，%H:%M'，this.x）+'：'+this.y++'
'+Highcharts.dateFormat（'%b%e，%H:%M'，this.x）+Highcharts.dateFormat（'%b%e，%H:%M'，this.x）+'：'+this.y++'+Highcharts.y++'>；
}
},
打印选项：{
行：{
数据标签：{
已启用：true
},
enableMouseTracking:false
}
},
系列：[{
类型：“样条线”，
id:'总计'，
名称：'总计'，
颜色：“#2788F4”，
数据：[{
id:“总计-1361059200000”，
x:1361059200000，
y:35.0，
标记：{
已启用：true
}
}, {
id:“总计1361088000000”，
x:1361088000000，
y:254.0，
标记：{
已启用：true
}
}, {
id:“总计-1361116800000”，
x:1361116800000，
y:96.0，
标记：{
已启用：true
}
}, {
id:“总计-1361145600000”，
x:1361145600000，
y:0.0，
标记：{
已启用：false
}
}, {
id:“总计-136117440000”，
x:136117440000，
y:40.0，
标记：{
已启用：true
}
}, {
id:“总计-1361203200000”，
x:1361203200000，
y:117.0，
标记：{
已启用：true
}
}, {
id:“总计-1361232000000”，
x:1361232000000，
y:10.0，
标记：{
已启用：true
}
}, {
id:“总计-1361260800000”，
x:1361260800000，
y:206.0，
标记：{
已启用：true
}
}, {
id:“总计-1361289600000”，
x:1361289600000，
y:351.0，
标记：{
已启用：true
}
}, {
id:“总计-1361318400000”，
x:1361318400000，
y:0.0，
标记：{
已启用：false
}
}, {
id:“总计-1361347200000”，
x:1361347200000，
y:186.0，
标记：{
已启用：true
}
}, {
id:“总计-1361376000000”，
x:1361376000000，
y:59.0，
标记：{
已启用：true
}
}, {
id:“总计-1361404800000”，
x:1361404800000，
y:0.0，
标记：{
已启用：false
}
}, {
id:“总计-136143360000”，
x:136143360000，
y:211.0，
标记：{
已启用：true
}
}, {
id:“总计1361462400000”，
x:1361462400000，
y:104.0，
标记：{
已启用：true
}
}, {
id:“总计136149120000”，
x:136149120000，
y:0.0，
标记：{
已启用：false
}
}, {
id:'Total-1361520000000'，
x:1361520000000，
y:0.0，
标记：{
已启用：false
$(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"
}
}
}
}]
}]
});
});
});