Radar chart)

First, create a new project. Currently, you must set it in the database. The project is simple and difficult to say. Ajax and Raphael class libraries are used, but more often you can perform trigonometric functions (this is indispensable for Statistics .)

Delete index.html under publicand Add the following content under routes:

 
Map. Root: abilities #★★★★# Install the default routes as the lowest priority. # Note: These default routes make all actions in every controller accessible via GET requests. you shoshould # consider removing the them or commenting them out if you're using named routes and resources. map. connect ': Controller/: Action/: id' map. connect ': Controller/: Action/: ID.: format'
 

Enter a few numeric values.

The front-end show. ERB uses ajax to call data:

<% = Javascript_tag "window. _ token = '# {form_authenticity_token}' "If actioncontroller: base. allow_forgery_protection %> <% = javascript_include_tag: ults, "Raphael" %> <SCRIPT> window. onload = function () {var S = '& authenticity_token =' + window. _ token; var id = Window. location. tostring (). split ("/"). last (); New Ajax. request ("/abilities/show/" + id, {asynchronous: True, evalscripts: True, method: 'post', parameters: s });} </SCRIPT> <Div id = "Holder"> </div> <% = link_to 'edit', edit_ability_path (@ ability) %> | <% = link_to 'back ', abilities_path %>
 

It's so easy to use prototype to play with Ajax. Since form_authenticity_token is added to rails2.0 to prevent some cross-site attacks, we need to use a global variable to save this item and request it back as a variable of Ajax to prevent actioncontroller::Invalidauthenticitytoken error.

Then add the followingCode, Surrounded by a selected limb. Only xhr requests call them:

The main point is that this is a pentagon, so we first use 360/5 to get the angle of each point offset, and we get the coordinates of each point through COs and sin.

 
// Use the radius as the oblique side of the triangle // The oblique side * returns the coordinate of the Point projected to the X axis. // The oblique side * returns the coordinate of the Point projected to the Y axis. // we use the coordinate system of the center edge. center, therefore, we need to add the X coordinate of the center and the Y coordinate var x = the X coordinate of the center + the radius * Math. cos (-offset angle) * Math. PI/180) var y = Y coordinate of the center + radius * Math. sin (-offset angle) * Math. PI/180) // The reason why the angle is negative is that the screen coordinate system is opposite to the mathematical coordinate system.
 

After getting these five points, we use the path function to connect them, which is very similar to the usage of SVG. Finally, the background intercepts our xhr request to generate our radar chart perfectly.

VaR paper = Raphael ("Holder", 400,300), radii = 120, Cc = [200,150], ability = ["serious", "smart", "popular ", "character", "luck"], Data = [78,90, 67,100, 80], color = {Keynote: "#586f85", circle: "# b3e2d5", BG: "# eeffee", Edge: "#474747", shadow: "# abd7cb", light: "# fff", dark: "#000"}, circlestyle = {fill: color. circle, stroke: color. edge, "stroke-dasharray": "-"}, labelstyle = {fill: color. dark, Font: "12px 'Microsoft yahei', Arial"}, outterlabelstyle = {stroke: color. shadow, "stroke-Opacity": 0.5, "stroke-linecap": "round", "stroke-width": "20px"}, framestyle = {fill: color. light, stroke: color. dark, "stroke-width": 1}, coords = []; paper. rect (398,298, 10 ). ATTR ({fill: color. BG, stroke: color. edge, "stroke-width": "1px"}); For (VAR I = 0, n = data. length; I <n; I ++) {var x = + (CC [0] + data [I]/100 * radii * Math. cos (-(18 + 72 * I) * Math. PI/180 )). tofixed (2), Y = + (CC [1] + data [I]/100 * radii * Math. sin (-(18 + 72 * I) * Math. PI/180 )). tofixed (2), El = [x, y], LinEx = + (CC [0] + (radii-2) * Math. cos (-(18 + 72 * I) * Math. PI/180 )). tofixed (2), Liney = + (CC [1] + (radii-2) * Math. sin (-(18 + 72 * I) * Math. PI/180 )). tofixed (2), line = ["M", CC [0], CC [1], "L", LinEx, Liney, "Z"], outx = Cc [0] + (radii + 20) * Math. cos (-(18 + 72 * I) * Math. PI/180), outy = Cc [1] + (radii + 20) * Math. sin (-(18 + 72 * I) * Math. PI/180); paper. circle (CC [0], CC [1], radii * (100-20 * I)/100 ). ATTR (circlestyle); coords. push (EL); paper. PATH (outterlabelstyle, line. join (""); paper. text (outx, outy, ability [I]). ATTR ({"font-size": "14px", "font-weight": 700 }). rotate (72-72 * I)} var Path = ["M", coords [0], "L", coords [1], "L", coords [2], "L", coords [3], "L", coords [4], "Z"], frame = paper. rect (10, 10, 55, 20, 5 ). ATTR (framestyle ). hide (), label = paper. text (5, 5 ,""). ATTR (labelstyle ). hide (); Path = path. join (""); paper. PATH ({fill: color. keynotes, opacity: 0.75, stroke: "NONE"}, PATH); For (VAR I = 0, n = coords. length; I <n; I ++) {var dot = paper. circle (coords [I] [0], coords [I] [1], 5 ). ATTR ({fill: color. keynote, opacity: 0.95, stroke: "NONE"}); (function (dot, I) {dot. mouseover (function () {This. animate ({R: 10}, 200); frame. show (). animate ({X: coords [I] [0], Y: coords [I] [1]}, 1); label. ATTR ({text: ability [I] + "" + data [I]}). show (). animate ({X: coords [I] [0] + 25, Y: coords [I] [1] + 10}, 1) ;}); dot. mouseout (function () {This. animate ({R: 5}, 200); frame. hide (); label. hide () ;}) ;}( dot, I) ;}frame. tofront (); label. tofront ();