Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> przesyłanie danych do bibiloteki protovis
jaka_skala
post 28.05.2011, 05:55:15
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 28.05.2011

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
mortus
post 28.05.2011, 11:20:50
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
----- 

[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.
Go to the top of the page
+Quote Post
jaka_skala
post 29.05.2011, 15:45:46
Post #3





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 28.05.2011

Ostrzeżenie: (0%)
-----

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:)
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 11:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn