Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP]System głosowania (sonda) w kształcie okręgu
Forum PHP.pl > Forum > Przedszkole
mefistofeles
13.03.2010, 01:09:34
Poszukuje sondy, która oddane głosy reprezentuje na wykresie kołowym (jak w office).
Miał ktoś może styczność z czymś takim ?
darko
13.03.2010, 09:23:17
Osobiście nie korzystałem, ale wiem o istnieniu Google Chart
mefistofeles
14.03.2010, 05:57:29
Ciekawe narzędzie, ale coś jest z nim nie tak.

Jeśłi odpalimy sobie taki np kod:


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="content-type" 
  5.       content="text/html; charset=iso-8859-2"/>
  6.     <title>
  7.       Google Visualization API Sample
  8.     </title>
  9.     <script type="text/javascript" 
  10.      src="http://www.google.com/jsapi">
  11.     </script>
  12.     <script type="text/javascript">
  13.       google.load('visualization', '1', 
  14.         {packages: ['piechart']});
  15.     </script>
  16.     <script type="text/javascript">
  17.       function drawVisualization() {
  18.         // Create and populate the data table.
  19.         var data = new google.visualization.DataTable();
  20.         data.addColumn('string', 'Month');
  21.         data.addColumn('number', 'Sales');
  22.         data.addRows([
  23.  
  24.  
  25.  
  26. ['January',{v:20, f:'$20M'}],
  27.           ['February',{v:31, f:'$31M'}],
  28.           ['March',{v:61, f:'$61M'}],
  29.           ['April',{v:26, f:'$26M'}],
  30. 	['January',{v:20, f:'$20M'}],
  31.           ['February',{v:31, f:'$31M'}],
  32.           ['March',{v:61, f:'$61M'}],
  33.           ['April',{v:26, f:'$26M'}]
  34.  
  35.  
  36.  
  37.  
  38.         ]);
  39.  
  40.         // Create and draw the visualization.
  41.         new google.visualization.PieChart(
  42.           document.getElementById('visualization')).
  43.             draw(data, {is3D:true});
  44.       }
  45.       google.setOnLoadCallback(drawVisualization);
  46.     </script>
  47.   </head>
  48.   <body style="font-family: Arial;border: 0 none;font-size:20px;">
  49.     <div id="visualization" 
  50.      style="width: 300px; height: 300px;">
  51.     </div>
  52.   </body>
  53. </html>
[HTML] pobierz, plaintext



Wszystko gra, ale jak zmienimy wartość January na coś innego np tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="content-type" 
  5.       content="text/html; charset=iso-8859-2"/>
  6.     <title>
  7.       Google Visualization API Sample
  8.     </title>
  9.     <script type="text/javascript" 
  10.      src="http://www.google.com/jsapi">
  11.     </script>
  12.     <script type="text/javascript">
  13.       google.load('visualization', '1', 
  14.         {packages: ['piechart']});
  15.     </script>
  16.     <script type="text/javascript">
  17.       function drawVisualization() {
  18.         // Create and populate the data table.
  19.         var data = new google.visualization.DataTable();
  20.         data.addColumn('string', 'Month');
  21.         data.addColumn('number', 'Sales');
  22.         data.addRows([
  23.  
  24.  
  25.  
  26. ['Wojciech Bek',{v:20, f:'$20M'}],
  27.           ['February',{v:31, f:'$31M'}],
  28.           ['March',{v:61, f:'$61M'}],
  29.           ['April',{v:26, f:'$26M'}],
  30. 	['January',{v:20, f:'$20M'}],
  31.           ['February',{v:31, f:'$31M'}],
  32.           ['March',{v:61, f:'$61M'}],
  33.           ['April',{v:26, f:'$26M'}]
  34.  
  35.  
  36.  
  37.  
  38.         ]);
  39.  
  40.         // Create and draw the visualization.
  41.         new google.visualization.PieChart(
  42.           document.getElementById('visualization')).
  43.             draw(data, {is3D:true});
  44.       }
  45.       google.setOnLoadCallback(drawVisualization);
  46.     </script>
  47.   </head>
  48.   <body style="font-family: Arial;border: 0 none;font-size:20px;">
  49.     <div id="visualization" 
  50.      style="width: 300px; height: 300px;">
  51.     </div>
  52.   </body>
  53. </html>
[HTML] pobierz, plaintext



To kod wariuje i czcionka z 11px spada do 5px i nic z tym nie idzie zrobić chyba, żeby się bawić w buforowanie kodu wynikowego i podmienianie
stringów ale to dziwne obejście by było.

Ktoś wie dlaczego tak się dzieje, lub jak ustawić na sztywno wielkość czcionki bo w stylach się nie da ?
mortus
14.03.2010, 08:07:24
Wielkość czcionki można ustawić tutaj:
Kod
// Create and draw the visualization.
new google.visualization.PieChart(
    document.getElementById('visualization')).
        draw(data, {is3D: true, legendFontSize: '11px'});
Podobnie jak kilka innych parametrów. Przy czym jeżeli masz długie nazwy serii danych to powinieneś zmienić szerokość wykresu (width w div-ie visualization) na większą, albo umieścić legendę np. pod wykresem (poszukaj parametru pod linkiem, który Ci podałem).
mefistofeles
14.03.2010, 10:11:11
Super!
Wielkie dzięki za pomoc smile.gif
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.