怎样实现层 相对曲线向后倒退?

就象是显示股票走势的图形一样,随着行情曲线的前移,层相对曲线向后倒退,或就是实现股票走势的效果,我已经实现画线,但不知道层怎样处理,请赐教,先谢谢了.

解决方案 »

  1.   

    JS 能画曲线？LZ 把画线的代码贴出来看看先！
      

  2.   

    层移动是根据曲线走的么？
    曲线走是根据某个时间还是根据数据库中曲线的数据实时跑的？刷新么？还是用ajax？
      

  3.   

    俺去查了查，JS 画线就是逐点用 span 模拟，感觉很不好！LZ 的情况更适用 Flash ！个人观点，仅供参考！
      

  4.   

    ls有理，js画图就是这样的。
      

  5.   

    <HTML>
    <BODY><div style="width:200px;filter:alpha(opacity=30);opacity: 0.5;-moz-opacity:0.5;">半透明</div>
    <SCRIPT LANGUAGE="JavaScript"> 
    function DrawGraph()
    {a = new Array(100,200,300,150);
    b = document.createElement("span");
    b.innerHTML="&nbsp;";
    var i=0;
    while(i<a.length){
    div1 = document.createElement("DIV");
    div1.style.width="20px";
    div1.style.height=a[i]+"px";
    div1.style.display="inline";
    div1.style.backgroundColor="red";
    document.getElementById("graph").appendChild(div1);
    b = document.createElement("span");
    b.innerHTML="&nbsp;";
    document.getElementById("graph").appendChild(b);
    i++;
    }
    }</SCRIPT>
    <P><INPUT  type=button value="画图" name=""  onclick="DrawGraph();"></P>
    <div id="graph"></div></BODY>
    </HTML>
      

  6.   

    不考虑IE以外的用户可以用VML
      

  7.   

    我可以用javascript的画线程序根据服务器传来的数据,在层上画出曲线图,但问题是当曲线向右一直走的时候,曲线图就变得越来越长.请问怎样把先前的行情部分去掉,只剩下新来的行情曲线?画曲线的程序如下: <script language="javascript">
    var Working=false;
    var points = [];
    var lastPoint = {x:0,y:0};
    function drawCanvas()
    {
    var arr = eval(req.responseText);
          var x1 = arr[0];
    var y1 = arr[1];
    if(!Working){
    document.getElementById("show").style.display="none";
    Working=true;
    lastPoint.x = x1;
    lastPoint.y = y1;
    points.push( {x:x1,y:y1} );}else{
    var s='<v:line from="'+lastPoint.x+','+lastPoint.y+'" to="'+x1+','+y1+'" style="position:absolute;left:0px;top:0px;"></v:line>';
    lastPoint.x = x1;
    lastPoint.y = y1;
    points.push( {x:x1,y:y1} );var o=document.createElement(s);
    document.body.insertAdjacentElement('BeforeEnd',o);
    }
    }
    </script>
      

  8.   

    晕，看不懂！<v:line 是什么东东？最简单的方式就是，达到可见边界时就自动刷新绘图区。仅仅是一点儿想法而已！
      

  9.   

    俺只能实现直线连续绘图时的自动刷新，写个小例子，希望能对 LZ 有帮助！代码如下，L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body style="margin: 0px;">
      <div id="divBackgrond" style="background-color: #ffff00; width: 100%; height: 400px; overflow: auto;">
      </div>
       <h4>直线到达屏幕左边后自动重新开始，但是灰度连续变化！按钮可以暂停或继续变化！</h4>
       <input type="button" id="btnStop" value="Stop" />
      <script type="text/javascript">
      <!--
    var oPaper = document.getElementById("divBackgrond");
    var oStop = document.getElementById("btnStop");function changePrimitiveColor(strPrimitiveColor)
    {
        if (strPrimitiveColor.length == 2)
        {
            var arrNumber = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
            var numColor = parseInt(strPrimitiveColor, 16);
            numColor += numStep;
            if (numColor == 255 || numColor == 0)
            {
                numStep *= -1;
            }        return arrNumber[Math.floor(numColor/16)] + arrNumber[numColor%16]
        }
    }function changeColor(strColor)
    {
        if (strColor.length == 7)
        {
            var strR = changePrimitiveColor(strColor.substr(1, 2));
            var strG = changePrimitiveColor(strColor.substr(3, 2));
            var strB = changePrimitiveColor(strColor.substr(5, 2));
            
            return "#"+strR+strG+strB;
        }
    }var strPosition = "absolute";
    var strColor = "#888888";
    var numHeight = 20;
    var numWidth = 5;
    var numTop = 180;
    var numLeft = -numWidth;
    var numStep = 1;function SpreadLine()
    {
        if ((numLeft+2*numWidth) > oPaper.offsetWidth)
        {
            for (var i=oPaper.childNodes.length-1; i>=0; i--)
            {
                oPaper.removeChild(oPaper.childNodes[i]);
                numLeft = -numWidth;
            }
        }
        var oLine = oPaper.appendChild(document.createElement("div"));
        oLine.style.position = strPosition;
        strColor = changeColor(strColor);
        oLine.style.backgroundColor = strColor;
        oLine.style.height = numHeight + "px";
        oLine.style.width = numWidth + "px";
        oLine.style.top = numTop + "px";
        numLeft += numWidth;
        oLine.style.left = numLeft + "px";
    }var numTimerId = window.setInterval(SpreadLine, 5);oStop.onclick = function ()
    {
        if (numTimerId)
        {
            this.value = "Play";
            window.clearInterval(numTimerId);
            numTimerId = null;
        }
        else
        {
            this.value = "Stop";
            numTimerId = window.setInterval(SpreadLine, 5);
        }
        
    }
      //-->
      </script>
     </body>
    </html>
      

  10.   

    div的移动无非就是设置style的top和left属性 当然position必须是absoltue至于怎么去跟随线移动那就要靠你自己写计算公式了 然后用setTimeout来实现移动的过程找到起点和终点
    利用三角函数算出 角度a x点下一个位置就是|sina|*步长 y点下一个位置就是|cosa|*步长
    当然还得注意移动方向 
    以上都是初中的三角公式 你自己算啦