我有一個highcharts散點圖,我想添加一些自定義功能。對於在highcharts項目的每一次點擊(點擊過濾器,數據點和關閉按鈕),我想送對被點擊的功能,「S」,我下面包括了項目的信息。任何人都可以幫我用正確的代碼來做到這一點?或者是否有可能?Highcharts - 散點圖:如何將點擊信息發送到函數,並將點擊信息作爲參數
這裏是我的函數S,所以它需要的變量STR0通過STR6並將其發送到s.php作爲進一步處理的URL可變我寫它。
<script type="text/javascript">
function s(str0,str,str2,str3,str4,str5,str6)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}
}
xmlhttp.open("GET","/s.php?o="+str0+"&q="+str+"&r="+str2+"&s="+str3+"&t="+str4+"&u="+str5+"&v="str6,true);
xmlhttp.send();
}
</script>
例如,當有人點擊一個數據點,我要啓動該功能,幷包括x座標,y座標,該系列的股票中,「信息」,也許是字符串名稱「數據點」作爲參數。
爲過濾器,我想包括過濾器的名稱和一個字符串,說「過濾器」。
關閉按鈕,相同的參數,點擊一個數據點,但是字符串會說「關閉」,而不是「數據點」的。
這裏是完整的代碼。我已經嘗試過做
<!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="style.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: 'Q1 Eanings and Outlook Forecast'
},
subtitle: {
text: 'site.com proprietary professional'
},
xAxis: {
title: {
enabled: false,
text: 'Future Outlook'
},
labels:{formatter: function() {} },
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
enabled:false,
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.hover}<br><br><b>Current Q: </b>{point.y}/100<br><b>Outlook: </b>{point.x}/100<br><br><div style="text-align:center;">(click for more detail)</div>'
},
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.ticker,
maincontentText: '<b>Detail:</b> ' + this.info,
width: 200
});
}
}
}
}
},
series: [{
name: 'Weak Guidance',color: 'red',data: [
{x: 40,y:10,ticker:'KORS',info: 's', hover:'<br>br><a href="">read more</a>'},
{x: 20,y:50,ticker:'LULU',info:'D.<br><a href="">read more</a>'},
{x:0,y:0,ticker:'ZNGA'},
{x:4,y:10,ticker:'JCP'},
{x:6,y:25,ticker:'DECK'}
]},
{name:'Strong Guidance',color:'green',data:[
{x:60,y:60,ticker:'lulu'},
{x:100,y:100,ticker:'GPS'},
{x:70,y:66,ticker:'FB'}
]},
{name:'Inline Company Performance',color:'darkgrey',data:[
{x:50,y:50,ticker:'GIII'},
{x:53,y:43,ticker:'BNNY'}
]}]
});
});
</script>
<script type="text/javascript">
function s(str0,str,str2,str3,str4,str5,str6)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}
}
xmlhttp.open("GET","/s.php?o="+str0+"&q="+str+"&r="+str2+"&s="+str3+"&t="+str4+"&u="+str5+"&v="str6,true);
xmlhttp.send();
}
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="width: 900px; height: 400px; margin: 0 auto; float:left;"></div>
</body>
</html>
一件事是這樣的....
events: {
click: function(x,y,str2,str3,str4,str5,str6) {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}
}
xmlhttp.open("GET","/s.php?o="+x+"&q="+y+"&r="+str2+"&s="+str3+"&t="+str4+"&u="+str5+"&v="+str6,true);
xmlhttp.send();
}
}
但我不知道怎麼去,我需要對應STR0,STR ...... STR6等信息
你是如何創建的關閉按鈕?什麼是「過濾器」? – Mark