# 折线图（最好是js的）

0

`以前没有做过类似画曲线的模块，现在头儿让我做，时间又紧，求助啊、各位、折线图中包含最大值、最小值、数据3条线、希望帮个忙、`
Servers | 初学一级 | 园豆：45

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/```

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

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

0

lucika.zh | 园豆：59 (初学一级) | 2012-05-22 16:54

ok,先看看下

0

dojo，ext，jq；

nickel | 园豆：338 (菜鸟二级) | 2012-05-22 21:37

您需要登录以后才能回答，未注册用户请先注册