Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przesyłanie danych do bibiloteki protovis
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
jaka_skala
28.05.2011, 05:55:15
Witam

Mam problem, otóż chcę stworzyć sobie koło życia http://www.cieplinski-coaching.pl/zasoby/kolo_zycia

I chcę aby po zmianie wartości w input texcie np wpisanie 4 zmienalo mi sie zamalowanie koła. Ale niestety nie mam pomysłu jak to zrobić.

Główny problem polega na tym ze na zdarzenie onchange w kazdym inputtexcie uruchamia sie funkcja zmiana() , ale wykres,czyli koło nie zmienia się wcale.


To co udało mi sie zrobić dotychczas:
[HTML] pobierz, plaintext 
  1.  <table id="tabelka">
  2.      <tr><td> pieniadze</td><td> <input type="text" id="pieniadze" value="3"  onchange="zmiana()" /></td></tr>
  3.      <tr><td> milosc   </td><td> <input type="text" id="milosc" value="1"  onchange="zmiana()" /></td></tr>
  4.      <tr><td> kariera  </td><td> <input type="text" id="kariera" value="7" onchange="zmiana()" /></td></tr>
  5.      <tr><td> rodzina  </td><td> <input type="text" id="rodzina" value="6"  onchange="zmiana()"/></td></tr>
  6.      <tr><td>przyjazn  </td><td><input type="text" id="przyjazn" value="10"  onchange="zmiana()"/></td></tr>
  7.      <tr><td>odpoczynek  </td><td><input type="text" id="odpoczynek" value="3" onchange="zmiana()"/></td></tr>
  8.      <tr><td>sport  </td><td><input type="text" id="sport" value="3"  onchange="zmiana()"/></td></tr>
  9.      <tr><td>samochod  </td><td><input type="text" id="samochod" value="4"  onchange="zmiana()"/></td></tr>
  10.   </table>
[HTML] pobierz, plaintext


oraz skrypt :
[JAVASCRIPT] pobierz, plaintext 
  1. function zmiana(){
  2.   var pieniadze = document.getElementById('pieniadze').value;
  3.   var milosc = document.getElementById('milosc').value;
  4.   var kariera = document.getElementById('kariera').value;
  5.   var rodzina = document.getElementById('rodzina').value;
  6.   var przyjazn = document.getElementById('przyjazn').value;
  7.   var odpoczynek = document.getElementById('odpoczynek').value;
  8.   var sport = document.getElementById('sport').value;
  9.   var samochod = document.getElementById('samochod').value;
  10.  
  11. var table =[];
  12. table[0]=pieniadze;
  13. table[1]=milosc;
  14. table[2]=kariera;
  15. table[3]=rodzina;
  16. table[4]=przyjazn;
  17. table[5]=odpoczynek;
  18. table[6]=20;
  19. table[7]=samochod;
  20.  
  21.   new pv.Panel()
  22.  
  23.     .width(400)
  24.     .height(200)
  25.     .left(400)
  26.  
  27.   .add(pv.Wedge)
  28.     .data(table) //tutaj jest tablica z danymi wzietymi z inputtextów
  29.     .top(90)
  30.     .outerRadius(function(d){return Math.sqrt(d) * 20;})
  31.     .angle(1.29 * Math.PI / 5)
  32.     .strokeStyle("blue")
  33.     .root.render()
  34. }
[JAVASCRIPT] pobierz, plaintext



Za wszelką pomoc będę wdzięczny.
mortus
28.05.2011, 11:20:50 
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.   <meta http-eqquiv="content-type" content="text/html; charset=utf-8" />
  4.   <script type="text/javascript" src="protovis-3.2/protovis-r3.2.js"></script>
  5.   <style type="text/css">
  6.   <!--
  7.     body, p {
  8.       margin: 0;
  9.       padding: 0;
  10.     }
  11.     body {
  12.       font-family: verdana, Geneva, Arial, Halvetica, sans-serif;
  13.       font-size: 12px;
  14.     }
  15.     p {
  16.       padding: 2px 0;
  17.     }
  18.     .opis {
  19.       margin-right: 5px;
  20.       width: 100px;
  21.       display: inline-block;
  22.       text-align: right;
  23.     }
  24.     #data {
  25.       margin: 0 auto;
  26.       margin-top: 50px;
  27.       width: 400px;
  28.       text-align: center;
  29.     }
  30.     #figure {
  31.       margin: 0 auto;
  32.       width: 400px;
  33.       height: 400px;
  34.     }
  35.   -->
  36.   </style>
  37.   </head>
  38.   <body>
  39.     <div id="data">
  40.       <form name="data">
  41.         <p><span class="opis">Pieniadze:</span><input type="text" id="pieniadze" value="3" onchange="redraw()" /></p>
  42.         <p><span class="opis">Milosc:</span><input type="text" id="milosc" value="1" onchange="redraw()" /></p>
  43.         <p><span class="opis">Kariera:</span><input type="text" id="kariera" value="7" onchange="redraw()" /></p>
  44.         <p><span class="opis">Rodzina:</span><input type="text" id="rodzina" value="6" onchange="redraw()" /></p>
  45.         <p><span class="opis">Przyjazn:</span><input type="text" id="przyjazn" value="10" onchange="redraw()" /></p>
  46.         <p><span class="opis">Odpoczynek:</span><input type="text" id="odpoczynek" value="3" onchange="redraw()" /></p>
  47.         <p><span class="opis">Sport:</span><input type="text" id="sport" value="3"  onchange="redraw()" /></p>
  48.         <p><span class="opis">Samochod:</span><input type="text" id="samochod" value="4" onchange="redraw()" /></p>
  49.       </form>
  50.     </div>
  51.     <div id="figure">
  52.       <script type="text/javascript">
  53.       <!--
  54.  
  55.         var initialData = [3, 1, 7, 6, 10, 3, 3, 4];
  56.  
  57.         var figure = new pv.Panel()
  58.           .width(400)
  59.           .height(400)
  60.           .add(pv.Wedge)
  61.             .data(initialData) //tutaj jest tablica z danymi wzietymi z inputtextów
  62.             .left(200)
  63.             .bottom(200)
  64.             .outerRadius(function(d){return Math.sqrt(d) * 50;})
  65.             .angle(2 * Math.PI/8)
  66.             .strokeStyle("blue");
  67.         figure.render();
  68.  
  69.         function redraw() {
  70.           var data = new Array();
  71.           data[0] = document.getElementById("pieniadze").value;
  72.           data[1] = document.getElementById("milosc").value;
  73.           data[2] = document.getElementById("kariera").value;
  74.           data[3] = document.getElementById("rodzina").value;
  75.           data[4] = document.getElementById("przyjazn").value;
  76.           data[5] = document.getElementById("odpoczynek").value;
  77.           data[6] = document.getElementById("sport").value;
  78.           data[7] = document.getElementById("samochod").value;
  79.  
  80.           figure.data(data)
  81.             .render();
  82.  
  83.         }
  84.       -->
  85.       </script>
  86.     </div>
  87.   </body>
  88. </html>
[HTML] pobierz, plaintext

Teraz tak.
1. Dla pola tekstowego input metoda onchange musi być zatwierdzona klawiszem ENTER lub poprzez opuszczenie danego elementu input (np. kliknięcie gdziekolwiek na stronie).
2. Uprzednio źle miałeś zdefiniowany parametr metody angle, angle to po prostu 1/8 z 360 stopni.
3. Trzeba pomyśleć o ograniczeniu wartości wpisywanych do pól tekstowych, ponieważ dla wartości powyżej 15 diagram wyjdzie poza obszar rysowania.
jaka_skala
29.05.2011, 15:45:46
dziękuję bardzo pomocy jestes:)

Mam jeszcze jeden problem , mianowicie chcę zrobić linie podzialu , wydaje mi sie ze dla kola trzba wlasnorecznie tak robic , bo np dla wykresów korzysta sie z pv.Rule ,ale dla kola chyba sie nie da prawda?

Wiec swoimi silami zrobilem takie cos :
[JAVASCRIPT] pobierz, plaintext 
  1. var figure =  new pv.Panel()
  2.     .width(400)
  3.     .height(400)
  4.  
  5.   .add(pv.Wedge)
  6.     .data([1,2,3,4,5,6,7,8,9,10])
  7.     .left(200)
  8.     .bottom(200)
  9.     .innerRadius(100)
  10.     .outerRadius(90)
  11.     .angle(2* Math.PI)
  12.     .fillStyle("white")
  13.     .strokeStyle("gray")
  14.  
  15.   .add(pv.Wedge)
  16.   .outerRadius(function(d){return  10*this.index;} )
  17.   .root.render();
[JAVASCRIPT] pobierz, plaintext


Niby wyszlo, ale wiem ze to jest na przypal zrobione , czy mogłbys mi pomóc jak inna metoda da sie to zrobic? oraz jak zsynchronizować te linie podzialu z kazdym kawaleczkiem "ciasta",tak aby nalozyc linie podzialu na "kawalki ciasta",zeby linie byly stale niezmienne , zapewne da sie to zrobic wykorzystujac dziedziczenie , proszę o pomoc


jakby co to juz sobie poradziłem:)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.