Highcharts中的Highslide弹出窗口无法正确显示
[英]Highslide popup in Highcharts not showing properly
问题描述
When you click on a datapoint in this example, the popup appears but it is all the way in the corner, and it is not sized properly. 
在此示例中，当您单击数据点时，将显示弹出窗口，但该弹出窗口始终在角落，并且其大小不正确。 Can anyone see any immediate problems? 谁能看到任何即时问题？
The live code is here http://goo.gl/q8sfH 实时代码在这里http://goo.gl/q8sfH
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Companies'
},
subtitle: {
text: 'data.com proprietary professional'
},
xAxis: {
title: {
enabled: true,
text: 'Future Outlook'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Current Quarter'
},
labels: {
formatter: function() {
return this.value + ' ';
}
},
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: true
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
},
cursor: 'pointer',
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
// headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
}
},
series: [{
name: 'Nasdaq',
color: 'red',
data: [
{ y: 1,x:4,ticker:'KORS'}, {y: 5,x:2,ticker:'LULU'}, {x:0,y:0,ticker:'ZNGA'}, {x:.4,y:1,ticker:'JCP'}, {x:.6,y:2.5,ticker:'DECK'}
]},{name:'SP',color:'green',data:[
{x:6,y:6,ticker:'lulu'},{x:10,y:10,ticker:'GPS'},{x:7,y:6.6,ticker:'FB'}
]},{name:'Inline Company Performance',color:'darkgrey',data:[
{x:5,y:5,ticker:'GIII'},{x:5.3,y:4.3,ticker:'BNNY'}
]}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
2 个解决方案
解决方案1
1 2013-03-28 19:44:41
this.pageX and this.pageY are undefined as you have them now. 由于您现在拥有this.pageX和this.pageY，因此未定义。
Replace this: 替换为：
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
with this: 有了这个：
click: function(e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX,
y: e.pageY
},
headingText: this.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
invoke 'e' in the function(), and the reference it for the pageX and pageY 在function（）中调用“ e”，并为pageX和pageY引用它
Edit to clarify and to answer your secondary question: 编辑以澄清并回答您的第二个问题：
if you put the event inside the point object instead, you can skip the above change, and you can then use your this.x and this.y to pull in your other data elements from the point that was clicked on: 如果将事件放置在point对象中，则可以跳过上述更改，然后可以使用this.x和this.y从单击的位置提取其他数据元素：
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
}
Although the x value that you are trying to format as a date is not a date, so you will get a 12/31/1969 from that probably... 尽管您尝试将格式设置为日期的x值不是日期，所以您可能会从中获得12/31/1969的信息。
解决方案2
0 2015-03-10 05:32:23
如果需要X轴值，请使用this.category
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.