javascript编写的绘制图表程序-Javascript文档类资源-CSDN文库

共67个文件

gif：30个

html：30个

js：5个

javascript

图表

4星 · 超过85%的资源需积分: 9 80 浏览量 2011-03-16 15:56:51 上传评论收藏 94KB RAR 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源推荐

资源详情

资源评论

收起资源包目录

diagram.rar （67个子文件）

diagram

d_0000ff.gif 1KB

d_000000.gif 1KB

menu.html 3KB

area_object.html 4KB

flag_de.gif 1KB

p_000000.gif 1KB

v_red.gif 226B

showline.htm 2KB

flag_uk.gif 3KB

fx_input.html 2KB

x-click-but04.gif 857B

q_000000.gif 1KB

logarithmic_scale.html 4KB

smile.gif 579B

bar_object.html 4KB

linreg_main.html 410B

h_red.gif 206B

fx_display.html 1KB

diagram.css 424B

linreg_display.html 2KB

php_and_asp.html 360B

diagram_nav.js 98KB

line_object.html 4KB

v_blue.gif 226B

fx_main.html 385B

arrow_object.html 3KB

pi.gif 54B

h_blue.gif 206B

index.html 705B

q_0000ff.gif 1KB

diagram_with_nav47_check.js 13KB

blank.html 49B

relative_position.html 2KB

v_green.gif 232B

o_ff0000.gif 45B

php_and_asp_versions.html 15KB

php_and_asp_menu.html 2KB

diagram.js 104KB

diagram_dom.js 92KB

o_0000ff.gif 45B

p_ff0000.gif 1KB

linreg_input.html 1KB

dot_object.html 3KB

pie_object.html 3KB

v_orange.gif 227B

o_000000.gif 45B

h_orange.gif 200B

b_0000ff.gif 1KB

static_example.html 7KB

evalsafe.js 174B

zoom_line.html 3KB

dynamic_example.html 7KB

p_0000ff.gif 1KB

diagram_object.html 9KB

b_000000.gif 1KB

download.html 3KB

d_ff0000.gif 1KB

introduction.html 3KB

flag_br.gif 3KB

h_green.gif 187B

transparent.gif 42B

iframe_example.html 3KB

q_ff0000.gif 1KB

b_ff0000.gif 1KB

pixel_object.html 4KB

box_object.html 4KB

browser_support.html 13KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JavaScript Diagram Builder - PHP & ASP versions</title> <link rel=stylesheet type="text/css" href="diagram.css" /> </head> <body> <TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD> <H3>LT Diagram Builder - <a href="#php">PHP</a> & <a href="#asp">ASP</a> versions</H3> </TD></TR><TR><TD> Since version 3.0 you can generate images of coordinate diagrams (resp. charts or graphs) at serverside (using PHP or ASP) and save it as file or send it back as a stream. These 2 versions are independent from the clientside JavaScript version of the script. The method calls of the 2 scripts are very similar to the method calls of the JavaScript version. However, the methods for changing the properties of objects (MoveTo, ResizeTo, SetColor, etc.) are not available, because it is not possible to change these properties after the image has been created. Because of this, the bar, box, dot, pixel, line, area, arrow and pie objects in the JavaScript version, are methods of the diagram object in the PHP and ASP version. The usage of the script versions is shown in the following table: <table border=0 cellpadding=2 cellspacing=1 bgcolor="#808080"> <tr bgcolor="#cccccc"><td colspan=2>Include the script file</td></tr> <tr bgcolor="#ffffff"><td>JavaScript</td><td><SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT></td></tr> <tr bgcolor="#ffffff"><td>PHP</td><td>include ("diagram.php");</td></tr> <tr bgcolor="#ffffff"><td>ASP</td><td></td></tr> <tr bgcolor="#cccccc"><td colspan=2>Generate a new diagram</td></tr> <tr bgcolor="#ffffff"><td>JavaScript</td><td> //_DiagramTarget=window; //only necessary, if the target is not the current window D=new Diagram();</td></tr> <tr bgcolor="#ffffff"><td>PHP</td><td>$D=new Diagram(); $D->Img=@ImageCreate(480, 320) or die("Cannot create a new GD image."); ImageColorAllocate($D->Img, 255, 255, 255); //background color</td></tr> <tr bgcolor="#ffffff"><td>ASP</td><td> Set D=New Diagram Set D.Img=CreateObject("gdImage.Images.1") D.Img.ImageCreate 480, 320 D.Img.ImageColorAllocate 0,255,255,255 'Background Color </td></tr> <tr bgcolor="#cccccc"><td colspan=2>Add a bar, box, dot, etc...</td></tr> <tr bgcolor="#ffffff"><td>JavaScript</td><td> new Bar(10, 20, 80, 40, "#ff0000", "This is Text", "#000000", "This is TooltipText", "alert(\"This is onClick event.\")");</td></tr> <tr bgcolor="#ffffff"><td>PHP</td><td> $D->Bar(10, 20, 80, 40, "#ff0000", "This is Text", "#000000", "This is TooltipText", "alert(\"This is onClick event.\")");</td></tr> <tr bgcolor="#ffffff"><td>ASP</td><td> D.Bar 10, 20, 80, 40, "#ff0000", "This is Text", "#000000", "This is TooltipText", "alert(""This is onClick event."")"</td></tr> </td></tr> <tr bgcolor="#cccccc"><td colspan=2>Save the image as file</td></tr> <tr bgcolor="#ffffff"><td>JavaScript</td><td>//not available and not necessary</td> <tr bgcolor="#ffffff"><td>PHP</td><td> ImagePng($D->Img, "my_image.png"); ImageDestroy($D->Img);</td></tr> <tr bgcolor="#ffffff"><td>ASP</td><td> D.Img.ImagePng 0, Server.mappath("my_image.png") D.Img.ImageDestroy 0 Set D.Img=Nothing</td></tr> <tr bgcolor="#cccccc"><td colspan=2>Send the image from the server back to the client as a stream</td></tr> <tr bgcolor="#ffffff"><td>JavaScript</td><td>//not available and not necessary</td> <tr bgcolor="#ffffff"><td>PHP</td><td> header("Content-type: image/png"); ImagePng($D->Img); ImageDestroy($D->Img);</td></tr> <tr bgcolor="#ffffff"><td>ASP</td><td> 'There is no direct support but you can get it working this way: Set objFS=Server.CreateObject("Scripting.FileSystemObject") FN = objFS.GetTempName() FN=Server.mappath(FN) D.Img.ImagePng 0, FN Set objStream = Server.CreateObject("ADODB.Stream") objStream.Charset = "x-ansi" objStream.Type = 2 objStream.Open objStream.LoadFromFile FN Response.ContentType = "image/png" Response.AddHeader "Content-Disposition","filename=image.png" objStream.Position = 0 objStream.Type = 1 Response.BinaryWrite objStream.Read() objStream.Close Set objStream = Nothing objFS.DeleteFile FN, false Set objFS=Nothing D.Img.ImageDestroy 0 Set D.Img=Nothing</td></tr> </table> <H3>Differences between JavaScript version and PHP/ASP version</H3> In JavaScript you can use code like D.Font="font-family:Verdana;font-weight:normal;font-size:10pt;line-height:13pt;"; _BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;"; to set the font for the Diagram object or the Bar/Box object. In PHP (ASP) you will use code like $D->Font=4; D.Font=4 $D->BFont=5; D.BFont=5 to set the font(1..5) for the Diagram object or the Bar/Box object. You can set the font of the bar and box object BFont to -1..-5 for vertical text. For vertical text of the X-axis use a Font value from -1..-5. In JavaScript you can use the result of the predefined JavaScript function Date.UTC(2001,0,1,0,0,0); //date/time: year, month(0..11), day, hour, min, sec as argument for the SetBorder method of a diagram with date/time scale. In PHP (ASP) you can use the function UTC(2001,1,1,0,0,0); UTC(2001,1,1,0,0,0) //date/time: year, month(1..12), day, hour, min, sec which is defined in the script file diagram.php diagram.asp. Take care with the difference in the argument for the month! <hr /> <a name="php"></a><H3>PHP version</H3> You can use the following methods: <UL> <LI>$D=new Diagram() //Constructor</LI> <LI>$D->SetFrame($theLeft, $theTop, $theRight, $theBottom) //Screen</LI> <LI>$D->SetBorder($theLeftX, $theRightX, $theBottomY, $theTopY) //World</LI> <LI>$D->SetText($theScaleX, $theScaleY, $theTitle) //Labels (optional)</LI> <LI>$D->ScreenX($theRealX) //Coordinate transformation world->screen</LI> <LI>$D->ScreenY($theRealY) //Coordinate transformation world->screen</LI> <LI>$D->RealX($theScreenX) //Coordinate transformation screen->world</LI> <LI>$D->RealY($theScreenY) //Coordinate transformation screen->world</LI> <LI>$D->GetXGrid() //returns array, which contains min, delta and max of the X grid</LI> <LI>$D->GetYGrid() //returns array, which contains min, delta and max of the Y grid</LI> <LI>$D->SetGridColor($theGridColor[, $theSubGridColor]) //Colors of X and Y grid lines</LI> <LI>$D->SetXGridColor($theGridColor[, $theSubGridColor]) //Colors of X grid lines</LI> <LI>$D->SetYGridColor($theGridColor[, $theSubGridColor]) //Colors of Y grid lines</LI> <LI>$D->Draw($theDrawColor, $theTextColor, $isScaleText[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]) //Display</LI> </UL> Before drawing, you can set the following pr

评论收藏

内容反馈