raphael很好的一个javascript作图库

shijiang1130

1. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

复制代码

shijiang1130

http://raphaeljs.com/

shijiang1130

1. map(_Env,[])->
   
2.   [header(),top("top"),
   
3.   "<script type=\"text/javascript\" src=\"/js/raphael.js\"></script>
   
4.   <script type=\"text/javascript\" src=\"/js/map.js\"></script>
   
5.   <div id=\"mypaper\"></div>
   
6.   <script type=\"text/javascript\">
   
7.   var r = Raphael(\"mypaper\", 1470, 1670);",
   
8. "var shapes = [",
   
9. "
   
10. r.circle(700,130,50),
    
11. r.circle(0,400,30),
    
12. r.circle(100,400,30),
    
13. r.circle(200,400,30),
    
14. r.circle(300,400,30),
    
15. r.circle(400,400,30),
    
16. r.circle(500,400,30),
    
17. r.circle(600,400,30),
    
18. r.circle(700,400,30),
    
19. r.circle(800,400,30),
    
20. r.circle(900,400,30),
    
21. r.circle(1000,400,30),
    
22. r.circle(1100,400,30),",
    
23. 
    
24. "];",
    
25. "connections = [];",
    
26. 
    
27. "
    
28. r.connection(shapes[0], shapes[1],  \"red\", \"red\");
    
29. r.connection(shapes[0], shapes[2],  \"black\", \"black\");
    
30. r.connection(shapes[0], shapes[3],  \"red\", \"red\");
    
31. r.connection(shapes[0], shapes[4],  \"yellow\", \"yellow\");
    
32. r.connection(shapes[0], shapes[5],  \"green\", \"green\");
    
33. r.connection(shapes[0], shapes[6],  \"green\", \"green\");
    
34. r.connection(shapes[0], shapes[7],  \"green\", \"green\");
    
35. r.connection(shapes[0], shapes[8],  \"green\", \"green\");
    
36. r.connection(shapes[0], shapes[9],  \"green\", \"green\");
    
37. r.connection(shapes[0], shapes[10], \"green\", \"green\");
    
38. r.connection(shapes[0], shapes[11], \"green\", \"green\");
    
39. r.connection(shapes[0], shapes[12], \"green\", \"green\");
    
40. r.connection(shapes[0], shapes[13], \"green\", \"green\"); ",
    
41. 
    
42. 
    
43.   "</script>",
    
44.   footer()].
    

复制代码

shijiang1130

shijiang1130

上面的代码有点不erlang, 改改

1. map(_Env,[])->
   
2.   [header(),top("top"),
   
3.   "<script type=\"text/javascript\" src=\"/js/raphael.js\"></script>
   
4.   <script type=\"text/javascript\" src=\"/js/map.js\"></script>
   
5.   <div id=\"mypaper\"></div>
   
6.   <script type=\"text/javascript\">
   
7.   var r = Raphael(\"mypaper\", 1470, 1670);",
   
8. "var shapes = [",
   
9. "
   
10. r.circle(700,130,50),",
    
11. [  lists:concat(["r.circle(",Ph,",400,30),"]) || Ph <- lists:seq(0,1100,100)],
    
12. "];",
    
13. "connections = [];",
    
14. [  lists:concat(["r.connection(shapes[0], shapes[",Ph,"],  \"green\", \"green\");"]) || Ph <- lists:seq(1,13)],
    
15. "</script>",
    
16.   footer()].

复制代码

shijiang1130

shijiang1130

1. map(_Env,[])->
   
2.   [header(),top("top"),
   
3.   "<script type=\"text/javascript\" src=\"/js/raphael.js\"></script>
   
4.   <script type=\"text/javascript\" src=\"/js/map.js\"></script>
   
5.   <div id=\"mypaper\"></div>
   
6.   <script type=\"text/javascript\">
   
7.   var r = Raphael(\"mypaper\", 1470, 1670);",
   
8. "var shapes = [",
   
9. "
   
10. r.circle(700,130,50),",
    
11. [  lists:concat(["r.circle(",Ph,",400,30),"]) || Ph <- lists:seq(200,1100,100)],
    
12. [  lists:concat(["r.circle(",Ph,",700,30),"]) || Ph <- lists:seq(200,800,100)],
    
13. "];",
    
14. "connections = [];",
    
15. [  lists:concat(["r.connection(shapes[0], shapes[",Ph,"],  \"green\", \"green\");"]) || Ph <- lists:seq(1,13)],
    
16. [  lists:concat(["r.connection(shapes[",Ph,"], shapes[10], \"red\", \"red\");"]) || Ph <- lists:seq(13,26)],
    
17. "</script>",
    
18.   footer()].
    

复制代码

shijiang1130

有没有一点网络拓扑图的雏形了呢