首页 新闻 会员 周边 捐助

折线图(最好是js的)

0
悬赏园豆:30 [已解决问题] 解决于 2012-05-29 09:46
以前没有做过类似画曲线的模块,现在头儿让我做,
时间又紧,求助啊、各位、折线图中包含最大值、最小值、数据3条线、希望帮个忙、
Servers的主页 Servers | 初学一级 | 园豆:45
提问于:2012-05-22 13:16
< >
分享
最佳答案
0
function drawLine( lineObjectHandle, Ax, Ay, Bx, By, lineImgPath )
{
    /*
     *    lineObjectHandle = an IMG tag with position:absolute
     */
    var
        xMin        = Math.min( Ax, Bx ),
        yMin        = Math.min( Ay, By ),
        xMax        = Math.max( Ax, Bx ),
        yMax        = Math.max( Ay, By ),
        boxWidth    = Math.max( xMax-xMin, 1 ),
        boxHeight   = Math.max( yMax-yMin, 1 ),
        tmp         = Math.min( boxWidth, boxHeight ),
        smallEdge   = 1,
        newSrc;


    while( tmp>>=1 )
        smallEdge<<=1;

    newSrc = lineImgPath+ smallEdge +( (Bx-Ax)*(By-Ay)<0?"up.gif":"down.gif" );
    if( lineObjectHandle.src.indexOf( newSrc )==-1 )
        lineObjectHandle.src = newSrc;

    with( lineObjectHandle.style )
    {
        width   = boxWidth    +"px";
        height  = boxHeight    +"px";
        left    = xMin        +"px";
        top     = yMin        +"px";
    }
}

http://www.p01.org/releases/Drawing_lines_in_JavaScript/

第二
种方法:

<script type="text/JavaScript">

    //Create jsGraphics object
    var gr = new jsGraphics(document.getElementById("canvas"));

    //Create jsColor object
    var col = new jsColor("red");

    //Create jsPen object
    var pen = new jsPen(col,1);

    //Draw a Line between 2 points
    var pt1 = new jsPoint(20,30);
    var pt2 = new jsPoint(120,230);
    gr.drawLine(pen,pt1,pt2);

    //Draw filled circle with pt1 as center point and radius 30. 
    gr.fillCircle(col,pt1,30);

    //You can also code with inline object instantiation like below
    gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150)); 

</script>
<script type="text/javascript">
    var gr=new jsGraphics(document.getElementById("canvas"));
    var redPen=new jsPen(new jsColor("red"),1);
    var greenPen=new jsPen(new jsColor("green"),3);
    var bluePen=new jsPen(new jsColor("blue"),1);

    var curvePoints=new Array(new jsPoint(28,35),new jsPoint(52,16),new jsPoint(177,38),new jsPoint(149,85),new jsPoint(57,92)); 
    var bezierPoints=new Array(new jsPoint(-283,10),new jsPoint(-206,95),new jsPoint(-24,90),new jsPoint(-56,10));
    var closedCurvePoints=new Array(new jsPoint(-265,-50),new jsPoint(-68,-23),new jsPoint(-114,-50),new jsPoint(-58,-95));
    var polyPoints=new Array(new jsPoint(160,-50),new jsPoint(190,-80),new jsPoint(240,-15),new jsPoint(260,-67));

    gr.setOrigin(new jsPoint(300,100)); 
    gr.setCoordinateSystem("cartecian"); 
    gr.showGrid(20);

    plotPoints(curvePoints); 
    plotPoints(bezierPoints); 

    gr.drawCurve(bluePen,curvePoints);
    gr.drawBezier(bluePen,bezierPoints); 
    gr.fillClosedCurve(redPen.color,closedCurvePoints);

    gr.drawLine(greenPen,new jsPoint(25,-25),new jsPoint(80,-80)); 
    gr.fillEllipse(new jsColor("aqua"),new jsPoint(100,-55),50,30);                 
    gr.drawPolygon(redPen,polyPoints); 

    var font=new jsFont("arial","bold","12px");

    gr.drawText("Curve passing through given points.",new jsPoint(200,80),font,bluePen.color,90); 
    gr.drawText("Cubic Bezier curve.",new jsPoint(-220,40),font,bluePen.color,110);
    gr.drawText("Filled, closed curve.",new jsPoint(-60,-25),font,bluePen.color,60);
    gr.drawText("Basic drawing (line, ellipse, polygon).",new jsPoint(25,-80),font,bluePen.color);

    plotPoints(closedCurvePoints);

    function plotPoints(points) 
    { 
        for( i in points) 
        { 
            gr.fillRectangle(new jsColor("green"),new jsPoint(points[i].x-2,points[i].y+2),4,4);
        }
    }
</script>div>
http://jsdraw2d.jsfiction.com/

收获园豆:20
悟行 | 专家六级 |园豆:12559 | 2012-05-22 13:59

看了下。还是不懂。求解释

Servers | 园豆:45 (初学一级) | 2012-05-22 14:19

@Servers: 原理跟C#划线差不多。

悟行 | 园豆:12559 (专家六级) | 2012-05-22 14:21
其他回答(2)
0

可以搜索一下js 图形报表。如果jquery使用比较熟练的,可以找一下jquery 图形报表。其中折线报表不知是否适合。

收获园豆:5
lucika.zh | 园豆:62 (初学一级) | 2012-05-22 16:54

ok,先看看下

支持(0) 反对(0) Servers | 园豆:45 (初学一级) | 2012-05-22 17:00
0

网上其实插件很多,不过都离不开两个实体:画布和画笔,然后都是一些图像类;

dojo,ext,jq;

收获园豆:5
nickel | 园豆:338 (菜鸟二级) | 2012-05-22 21:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册