API tools faq
paste
asimryu

꺽은선 캔버스

asimryu
Jan 6th, 2015
311
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=utf-8>
  5.         <title>Interactive Line Graph</title>
  6.         <style>
  7.             body {margin:20px;}
  8.             table {width:500px;border-collapse: collapse;}
  9.             table td, table th {border:1px solid #888;text-align:center;}
  10.             table th {background-color:#ddd;}
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <table style="width:500px;">
  15.             <colgroup>
  16.                 <col width="16%">
  17.                 <col width="14%">
  18.                 <col width="14%">
  19.                 <col width="14%">
  20.                 <col width="14%">
  21.                 <col width="14%">
  22.                 <col width="14%">
  23.             </colgroup>
  24.             <tbody>
  25.             <tr id="row0" class="header">
  26.                 <th>부서</th>
  27.                 <th>1월</th>
  28.                 <th>2월</th>
  29.                 <th>3월</th>
  30.                 <th>4월</th>
  31.                 <th>5월</th>
  32.                 <th>6월</th>
  33.             </tr>
  34.             <tr id="row1" data-row="1" class="row">
  35.                 <td>철강팀</td>
  36.                 <td>50</td>
  37.                 <td>40</td>
  38.                 <td>60</td>
  39.                 <td>10</td>
  40.                 <td>54</td>
  41.                 <td>65</td>
  42.             </tr>
  43.             <tr id="row2" data-row="2" class="row">
  44.                 <td>섬유팀</td>
  45.                 <td>50</td>
  46.                 <td>60</td>
  47.                 <td>40</td>
  48.                 <td>90</td>
  49.                 <td>34</td>
  50.                 <td>70</td>
  51.             </tr>
  52.             <tr id="row3" data-row="3" class="row">
  53.                 <td>영업3팀</td>
  54.                 <td>20</td>
  55.                 <td>80</td>
  56.                 <td>90</td>
  57.                 <td>50</td>
  58.                 <td>64</td>
  59.                 <td>20</td>
  60.             </tr>
  61.             </tbody>
  62.         </table>
  63.         <p></p>
  64.         <canvas id="graph" width="500" height="300"></canvas>
  65.         <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
  66.         <script>
  67.             var graph, data;
  68.             var xPadding = 30;
  69.             var yPadding = 30;
  70.            
  71.             function getData(row){
  72.                 var cols = $("#row" + row).children("td");
  73.                 data = { values:[
  74.                     { X: "1월", Y: parseInt($(cols[1]).html()) },
  75.                     { X: "2월", Y: parseInt($(cols[2]).html()) },
  76.                     { X: "3월", Y: parseInt($(cols[3]).html()) },
  77.                     { X: "4월", Y: parseInt($(cols[4]).html()) },
  78.                     { X: "5월", Y: parseInt($(cols[5]).html()) },
  79.                     { X: "6월", Y: parseInt($(cols[6]).html()) },
  80.                 ]};
  81.             }
  82.             // Returns the max Y value in our data list
  83.             function getMaxY() {
  84.                 var max = 0;
  85.                
  86.                 for(var i = 0; i < data.values.length; i ++) {
  87.                    if(data.values[i].Y > max) {
  88.                         max = data.values[i].Y;
  89.                     }
  90.                 }
  91.                
  92.                 max += 10 - max % 10;
  93.                 return max;
  94.             }
  95.            
  96.             // Return the x pixel for a graph point
  97.             function getXPixel(val) {
  98.                 return ((graph.width() - xPadding) / data.values.length) * val + (xPadding * 1.5);
  99.             }
  100.            
  101.             // Return the y pixel for a graph point
  102.             function getYPixel(val) {
  103.                 return graph.height() - (((graph.height() - yPadding) / getMaxY()) * val) - yPadding;
  104.             }
  105.  
  106.             function drawChart(row){
  107.                 getData(row);
  108.                 graph = $('#graph');
  109.                 var c = graph[0].getContext('2d');            
  110.                 c.clearRect(0, 0, graph[0].width, graph[0].height)
  111.                 c.lineWidth = 2;
  112.                 c.strokeStyle = '#333';
  113.                 c.font = 'italic 8pt sans-serif';
  114.                 c.textAlign = "center";
  115.                
  116.                 // Draw the axises
  117.                 c.beginPath();
  118.                 c.moveTo(xPadding, 0);
  119.                 c.lineTo(xPadding, graph.height() - yPadding);
  120.                 c.lineTo(graph.width(), graph.height() - yPadding);
  121.                 c.stroke();
  122.                
  123.                 // Draw the X value texts
  124.                 for(var i = 0; i < data.values.length; i ++) {
  125.                    c.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
  126.                }
  127.                
  128.                // Draw the Y value texts
  129.                c.textAlign = "right"
  130.                c.textBaseline = "middle";
  131.                
  132.                for(var i = 0; i < getMaxY(); i += 10) {
  133.                    c.fillText(i, xPadding - 10, getYPixel(i));
  134.                }
  135.                
  136.                c.strokeStyle = '#f00';
  137.                
  138.                // Draw the line graph
  139.                c.beginPath();
  140.                c.moveTo(getXPixel(0), getYPixel(data.values[0].Y));
  141.                for(var i = 1; i < data.values.length; i ++) {
  142.                    c.lineTo(getXPixel(i), getYPixel(data.values[i].Y));
  143.                }
  144.                c.stroke();
  145.                
  146.                // Draw the dots
  147.                c.fillStyle = '#333';
  148.                
  149.                for(var i = 0; i < data.values.length; i ++) {  
  150.                    c.beginPath();
  151.                    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
  152.                    c.fill();
  153.                }
  154.            }
  155.            
  156.             drawChart(1);
  157.  
  158.             $("table tbody td").hover(
  159.                 function(){
  160.                     $(this).parent("tr").children("td").css("background-color","yellow");
  161.                     var datarow = $(this).parent("tr").attr("data-row");
  162.                     drawChart(parseInt(datarow));
  163.                 },
  164.                 function(){
  165.                     $(this).parent("tr").children("td").css("background-color","white");
  166.                 }
  167.             );
  168.        </script>
  169.     </body>
  170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!