SHARE
TWEET

Untitled

a guest Mar 20th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Canvas</title>
  6.         <script type="text/javascript">
  7.             function draw(form) {
  8.                 var canvas = document.getElementById('image2');
  9.                 canvas.width = 1000;
  10.                 canvas.height = 1000;
  11.                 var context = canvas.getContext('2d');
  12.  
  13.                 var dane = [];
  14.                 var tmpDane = document.getElementsByClassName("dane");
  15.                 var daneY = [];
  16.                 var tmpDaneY = document.getElementsByClassName("daneY");
  17.                 var suma = 0;
  18.                 var minX = -100;
  19.                 var minY = 100;
  20.                 var maxX = -100;
  21.                 var maxY = 100;
  22.  
  23.                 for (var i = 0; i < tmpDane.length; ++i)
  24.                 {
  25.                     dane.push(parseFloat(tmpDane[i].value));
  26.                     daneY.push(parseFloat(tmpDaneY[i].value));
  27.                     suma += Math.abs(dane[i]);
  28.                     if(tmpDane[i].value > maxX) {
  29.                         maxX = tmpDane[i].value;
  30.                     } else if(tmpDane[i].value < minX) {
  31.                         minX = tmpDane[i].value;
  32.                     }
  33.                    
  34.                     if(tmpDaneY[i].value > maxY) {
  35.                         maxY = tmpDaneY[i].value;
  36.                     } else if (tmpDaneY[i].value < minY) {
  37.                         minY = tmpDaneY[i].value;
  38.                     }
  39.                 }
  40.                
  41.                 for(var i = 0; i < dane.length-1; i++) {
  42.                     for(var j = 1; j < dane.length; j++) {
  43.                         if(dane[j-1] > dane[j]) {
  44.                             var p = dane[j];
  45.                             dane[j] = dane[j-1];
  46.                             dane[j-1] = p;
  47.                             p = daneY[j];
  48.                             daneY[j] = daneY[j-1];
  49.                             daneY[j-1] = p;
  50.                         }
  51.                     }
  52.                
  53.                 }
  54.                
  55.                 var color = [];
  56.  
  57.                 context.font = "12pt Times New Roman";
  58.                 for (let i = 0; i < dane.length; i++) {
  59.                     var r = Math.floor(Math.random() * 899999) + 100000;
  60.                     color.push(r);
  61.                     context.fillStyle = '#' + r;
  62.                     context.fillRect(10, (20 * i) + 10, 10, 10);
  63.                     context.fillStyle = "black";
  64.                     context.fillText(dane[i] + " - " + daneY[i] + " - " + Math.abs(parseInt((dane[i] / suma) * 100)) + "%", 30, (20 * i) + 20);
  65.                 }
  66.  
  67.                 var title = form.title.value;
  68.  
  69.                 context.fillText(title, canvas.width / 2, 20);
  70.  
  71.                 var typ = form.typ.value;
  72.  
  73.                 wykPun(canvas, context, dane, suma, color, daneY, true);
  74.             }
  75.  
  76.             function ilosc(form)
  77.             {
  78.                 var iloscDanych = parseInt(form.iloscDanych.value);
  79.                 var daneTD = document.getElementById("daneTD");
  80.                 var etykietyTD = document.getElementById("etykietyTD");
  81.  
  82.                 daneTD.innerHTML = "";
  83.                 etykietyTD.innerHTML = "";
  84.  
  85.                 for (var i = 0; i < iloscDanych; ++i)
  86.                 {
  87.                     daneTD.innerHTML += "x " +(i + 1) + ": <input type='number' class='dane' name='dana" + i + "' value='" + (i + 1) + "'><br>";
  88.                     etykietyTD.innerHTML += "y " + (i + 1) + ": <input type='number' class='daneY' name='d" + i + "' value='" + (i + 1) + "'><br>";
  89.                 }
  90.             }
  91.  
  92.             function wykPun(canvas, context, dane, suma, color, daneY, linia) {
  93.                 var osX = 200;
  94.                 var przX = 0;
  95.                 var osY = canvas.height/2;
  96.                 var dlu = canvas.width - 100;
  97.                 var max = 0;
  98.                
  99.                
  100.                 for(let i = 0; i < daneY.length; i++) {
  101.                     if(Math.abs(daneY[i]) > max) {
  102.                         max = Math.abs(daneY[i]);
  103.                     }
  104.                 }
  105.  
  106.                 context.beginPath();
  107.                 context.moveTo(osX, osY);
  108.                 context.lineTo(osX + dlu, osY);
  109.                 context.stroke();
  110.  
  111.                 context.beginPath();
  112.                 context.moveTo(osX, osY - dlu);
  113.                 context.lineTo(osX, osY + 2 * dlu);
  114.                 context.stroke();
  115.  
  116.                 osX += 10;
  117.  
  118.                 context.font = "10pt Times New Roman";
  119.                
  120.                 var szerok = ((canvas.width - osX) / dane.length) / 2;
  121.                 var bylo = false;
  122.                 var p2 = 0;
  123.                 var przX2 = 0;
  124.                
  125.                 for (let i = 0; i < dane.length; i++) {
  126.                     var p = daneY[i]*osY/(max+1);
  127.                    
  128.                     context.beginPath();
  129.                     context.fillStyle = '#' + color[i];
  130.                     context.fillRect(osX + przX,osY - p, 10, 10);
  131.                    
  132.                     if(linia) {
  133.                         if(bylo === false) {
  134.                             przX2 = przX;
  135.                             p2 = p;
  136.                             bylo = true;
  137.                         } else {
  138.                             context.strokeStyle = '#' + color[i-1];
  139.                             context.moveTo(osX + przX2+5,osY - p2+5)
  140.                             context.lineTo(osX + przX+5,osY - p+5);
  141.                             context.stroke();
  142.                             przX2 = przX;
  143.                             p2 = p;
  144.                         }
  145.                     }
  146.                    
  147.                     context.fillStyle = 'black';
  148.                     context.fillText(dane[i], osX + przX, osY + 20);
  149.  
  150.                     przX += ((canvas.width - osX - 10) / dane.length) / 2;
  151.                     przX += szerok;
  152.                 }
  153.             }
  154.         </script>
  155.     </head>
  156.     <body>
  157.         <form>
  158.             <table>
  159.                 <tr>
  160.                     <td colspan="4">
  161.                 <center>
  162.                     Tytuł:<br>
  163.                     <input type='text' name ='title' value='tytul'><br><br>
  164.                 </center>
  165.  
  166.                 </td>
  167.                 </tr>
  168.                 <tr>
  169.                     <td>
  170.                         Ilosc danych<br>
  171.                         <input type="number" name="iloscDanych" value="1" min="1"><br><br>
  172.                         <input type="button" name="akceptujIloscDanych" value="Zmien" onclick="ilosc(this.form);">
  173.                         <input type="button" name="a" value="Rysuj" onclick="draw(this.form);">  
  174.                     </td>
  175.                     <td id="daneTD"> x: <input type='number' class='dane' name='dana0' value='0'><br> </td>
  176.                     <td id="etykietyTD"> y: <input type='number' class='daneY' name='d0' value='1'><br> </td>
  177.                     <td id='typ'>
  178.                         XY: <input checked type='radio' name='typ' value='xy'><br>
  179.                     </td>
  180.                 </tr>  
  181.             </table>
  182.             <canvas id="image2">
  183.             </canvas>
  184.         </form>
  185.     </body>
  186. </html>
RAW Paste Data
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!
 
Top