2013-04-01 32 views
0

我有一個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等信息

+0

你是如何創建的關閉按鈕?什麼是「過濾器」? – Mark

回答

2

首先,我永遠不會創建像S這樣的函數。如果你發現自己喜歡arg1, arg2, arg3, arg4參數創建函數,那麼什麼是錯的與您的設計。無視這一秒,並回答你的問題。


Highcharts允許您設置對情節許多不同的組件click事件處理程序。您可以在您的plotOptions中爲該特定組件設置這些處理程序。舉例來說,如果你想處理一個scatter plot point點擊事件,您可以設置這樣的處理程序:

plotOptions: { 
     series: { 
      point: { 
       events: { 
        click: function() { 
         // look at the variable this 
        } 
       } 
      } 
     } 
    }, 

裏面function()this變量是被點擊的項目。在散點圖的情況下,它是點對象。在此功能,您可以自由打電話給你s函數傳遞任何你想要的數據,將其從this查詢。

接下來,如果你正在創建的關閉按鈕作爲highcharts背景下按鈕,你會設置該component點擊處理程序。對於處理程序this是圖表對象。

使用這種方法,你可以創建你所關心的每一個組件的單擊處理程序。從這些處理程序中,您可以調用s函數。