数据与坐标有转换吧,用event.x和event.y判断点的区域取响应数据吧

解决方案 »

  1.   

    这最好是用控件来实现 。 。 。 如果要在html里实现的话 , 有些难度 。。或者但鼠标点击某条线时, 你用event.x ,和event.y来获取鼠标的位置 , 然后经过转换 , 转换成对应的在你的图中的坐标 , 然后根据坐标取出你所要的数据 。 。 前提是你在网页中存有此点的数据 。
      

  2.   

    用onclick事件,TITLE,等都可以,看下边的例子
    ==========================================<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <!--[if !mso]>
    <style>
    v\:*         { behavior: url(#default#VML) }
    o\:*         { behavior: url(#default#VML) }
    .shape       { behavior: url(#default#VML) }
    </style>
    <![endif]--><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    <style>
    TD { FONT-SIZE: 9pt}
    </style></head>
    <body topmargin=5 leftmargin=0 scroll=AUTO>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="170px,315px" to="255.714285714286px,190px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:168px;top:313px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="255.714285714286px,190px" to="341.428571428571px,227.5px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:253.714285714286px;top:188px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="341.428571428571px,227.5px" to="427.142857142857px,265px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:339.428571428571px;top:225.5px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="427.142857142857px,265px" to="512.857142857143px,187.25px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:425.142857142857px;top:263px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="512.857142857143px,187.25px" to="598.571428571429px,288.375px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:510.857142857143px;top:185.25px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="598.571428571429px,288.375px" to="684.285714285714px,240px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect  title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:596.571428571429px;top:286.375px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:rect  title="这里放你的值" value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:682.285714285714px;top:238px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    </body>
    </html>
      

  3.   

    谢谢awaysrain,确实可以实现,但我想再完善点。
    我的曲线是多条,当点击到某点时,我想把跟这个点在同一个x坐标的多条曲线上点的值都得到,烦劳再给看看
      

  4.   

    简单的办法你在服务器端把值都生成,如:<v:rect  title="线1的值,线2的值,线3的值……" value="线1的值,线2的值,线3的值……" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:682.285714285714px;top:238px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>在客户端也可以,先设置点的x,y坐标,用document.getElementsByTagName("你的点的标记")得到所有的点,然后循环遍历得到x坐标相等的点还有我好象记得在哪里看到有个根据位置得到元素的方法,记不太清楚了也不太肯定,谁知道?
      

  5.   

    我用的是ORACLE公司某些员工研发出来玩,并免费公布了源代码的小模块
      

  6.   

    title="线1的值,线2的值,线3的值……" 
    要想换行,不知道怎么实现.形成:
    线1的值,
    线2的值,
    线3的值
    …… title="线1的值,<br>线2的值,<br>线3的值……" ----是不行的
      

  7.   

    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <!--[if !mso]>
    <style>
    v\:*         { behavior: url(#default#VML) }
    o\:*         { behavior: url(#default#VML) }
    .shape       { behavior: url(#default#VML) }
    </style>
    <![endif]--><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    <style>
    TD { FONT-SIZE: 9pt}
    </style>
    <style type='text/css' id='defaultPopStyle'>
    .cPopText {  background-color: #FFFFCC; border: 1px #000000 solid; font-size: 12px; padding-right: 2px; padding-left: 2px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
    </style>
    </head>
    <body topmargin=5 leftmargin=0 scroll=AUTO>
    <script>
    //***********默认设置定义.********************* 
    tPopWait=100;//停留tWait豪秒后显示提示。 
    tPopShow=4000;//显示tShow豪秒后关闭提示 
    showPopStep=10; 
    popOpacity=100; //***************内部变量定义***************** 
    sPop=null; 
    curShow=null; 
    tFadeOut=null; 
    tFadeIn=null; 
    tFadeWaiting=null; document.write(""); 
    document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>"); function showPopupText(){ 
    var o=event.srcElement; 
    MouseX=event.x; 
    MouseY=event.y; 
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; 
    if(o.dypop!=sPop) { 
    sPop=o.dypop; 
    clearTimeout(curShow); 
    clearTimeout(tFadeOut); 
    clearTimeout(tFadeIn); 
    clearTimeout(tFadeWaiting);  
    if(sPop==null || sPop=="") { 
    dypopLayer.innerHTML=""; 
    dypopLayer.style.filter="Alpha()"; 
    dypopLayer.filters.Alpha.opacity=0;  

    else { 
    if(o.dyclass!=null) popStyle=o.dyclass  
    else popStyle="cPopText"; 
    curShow=setTimeout("showIt()",tPopWait); 



    } function showIt(){ 
    dypopLayer.className=popStyle; 
    dypopLayer.innerHTML=sPop; 
    popWidth=dypopLayer.clientWidth; 
    popHeight=dypopLayer.clientHeight; 
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
    else popLeftAdjust=0; 
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
    else popTopAdjust=0; 
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
    dypopLayer.style.filter="Alpha(Opacity=0)"; 
    fadeOut(); 
    } function fadeOut(){ 
    if(dypopLayer.filters.Alpha.opacity<popOpacity) {
    dypopLayer.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
    }
    else {
    dypopLayer.filters.Alpha.opacity=popOpacity;
    tFadeWaiting=setTimeout("fadeIn()",tPopShow);
    }
    }function fadeIn(){
    if(dypopLayer.filters.Alpha.opacity>0) { 
    dypopLayer.filters.Alpha.opacity-=1; 
    tFadeIn=setTimeout("fadeIn()",1); 


    document.onmouseover=showPopupText; 
    </script>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="170px,315px" to="255.714285714286px,190px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:168px;top:313px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="255.714285714286px,190px" to="341.428571428571px,227.5px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:253.714285714286px;top:188px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="341.428571428571px,227.5px" to="427.142857142857px,265px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:339.428571428571px;top:225.5px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="427.142857142857px,265px" to="512.857142857143px,187.25px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:425.142857142857px;top:263px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="512.857142857143px,187.25px" to="598.571428571429px,288.375px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:510.857142857143px;top:185.25px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line id="_x0000_s1025" alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="598.571428571429px,288.375px" to="684.285714285714px,240px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:rect  alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:596.571428571429px;top:286.375px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:rect  alt="线1的值,<br>线2的值,<br>线3的值…… " value="这里放你的值" onclick=alert(this.value) id="_x0000_s1027" style='position:absolute;left:682.285714285714px;top:238px;width:4px;height:4px; z-index:2' fillcolor="#FF0000" strokecolor="#FF0000"/>
    </body>
    </html>
      

  8.   

    awaysrain(绝对零度)的想法很好,我要实现的数据量不小,现在是3条曲线,每条曲线大概会有400-600个点,这样数据量降会很大,而且我还要‘实时’刷新,大家群策群力,我这先谢谢了,大家还有没有更好的办法?