Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Rezultatele sondajelor sub formă de diagramă

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Rezultatele sondajelor sub formă de diagramă

Mesaj Scris de Petronel Sam Aug 26, 2017 10:14 pm

Rezultatele sondajelor sub formă de diagramă

Bun găsit,

În acest tutorial am să vă arăt cum puteți modifica aspectul rezultatelor sondajelor de pe forumul dvs., totul pentru a obține o diagramă grafică sau o diagramă de bare. Pentru a implementa această facilitate trebuie să fiți fondatorul forumului, deoarece sunt necesare modificări în template-uri. Tutorialul este compatibil cu toate versiunile de forumuri.

Acesta este aspectul implicit al unui sondaj pe forum:

Rezultatele sondajelor sub formă de diagramă Def10

Acesta este modul în care acesta va fi afișat cu ajutorul acestui tutorial (diagramă grafică):

Rezultatele sondajelor sub formă de diagramă 111

Sau (diagramă de bare):

Rezultatele sondajelor sub formă de diagramă 210

Diagramă grafică:

Panou de administrare  > Afisare  >  Template-uri  > General  > Editați template-ul viewtopic_poll_result și înlocuiți conținutul cu codul specific versiunii dvs. de forum.

PhpBB 2:
Cod:
   <tr>
     <td class="row2" colspan="2"><br clear="all" />
              <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
              <style> svg > g > g:last-child { pointer-events: none } </style>
              <script>
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                  var data = google.visualization.arrayToDataTable([
                    ['Answer', 'Value'],
                    <!-- BEGIN poll_option -->
                    ["{poll_option.POLL_OPTION_CAPTION}",    {poll_option.POLL_OPTION_RESULT} ],
                    <!-- END poll_option -->
                  ]);
            
                  var options = {
                    title: "{POLL_QUESTION}",
                    sliceVisibilityThreshold:0,
                    backgroundColor: 'transparent',
                    is3D: true,
                  };
            
                  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
                  chart.draw(data, options);
                }
              </script>
              <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
              <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
              <div class="gen" align="center">
                {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
                <!-- BEGIN cancel_vote -->
                  -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
                <!-- END cancel_vote -->
              </div>
              <br />
     </td>
    </tr>


phpBB 3 :
Cod:
   <div class="panel">
     <div class="inner"><span class="corners-top"><span></span></span>
     <div class="content">
              <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
              <style> svg > g > g:last-child { pointer-events: none } </style>
              <script>
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                  var data = google.visualization.arrayToDataTable([
                    ['Answer', 'Value'],
                    <!-- BEGIN poll_option -->
                    ["{poll_option.POLL_OPTION_CAPTION}",    {poll_option.POLL_OPTION_RESULT} ],
                    <!-- END poll_option -->
                  ]);
            
                  var options = {
                    title: "{POLL_QUESTION}",
                    sliceVisibilityThreshold:0,
                    backgroundColor: 'transparent',
                    is3D: true,
                  };
            
                  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
                  chart.draw(data, options);
                }
              </script>
              <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
              <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
              <div class="gen" align="center">
                {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
                <!-- BEGIN cancel_vote -->
                  -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
                <!-- END cancel_vote -->
              </div>
              <br />
       </div>
    </div>

punBB :
Cod:
<div class="main-content frm">
          <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
          <style> svg > g > g:last-child { pointer-events: none } </style>
          <script>
            google.charts.load("current", {packages:["corechart"]});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
              var data = google.visualization.arrayToDataTable([
                ['Answer', 'Value'],
                <!-- BEGIN poll_option -->
                ["{poll_option.POLL_OPTION_CAPTION}",    {poll_option.POLL_OPTION_RESULT} ],
                <!-- END poll_option -->
              ]);
        
              var options = {
                title: "{POLL_QUESTION}",
                sliceVisibilityThreshold:0,
                backgroundColor: 'transparent',
                is3D: true,
              };
        
              var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
              chart.draw(data, options);
            }
          </script>
          <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
          <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
          <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->
              -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
</div>

Invision :
Cod:
<div class="main">
  <div class="box-content row1">
          <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
          <style> svg > g > g:last-child { pointer-events: none } </style>
          <script>
            google.charts.load("current", {packages:["corechart"]});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
              var data = google.visualization.arrayToDataTable([
                ['Answer', 'Value'],
                <!-- BEGIN poll_option -->
                ["{poll_option.POLL_OPTION_CAPTION}",    {poll_option.POLL_OPTION_RESULT} ],
                <!-- END poll_option -->
              ]);
        
              var options = {
                title: "{POLL_QUESTION}",
                sliceVisibilityThreshold:0,
                backgroundColor: 'transparent',
                is3D: true,
              };
        
              var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
              chart.draw(data, options);
            }
          </script>
          <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
          <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
          <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->
              -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
  </div>
</div>

ModernBB :
Cod:
<div class="panel">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style> svg > g > g:last-child { pointer-events: none } </style>
    <script>
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Answer', 'Value'],
          <!-- BEGIN poll_option -->
          ["{poll_option.POLL_OPTION_CAPTION}",    {poll_option.POLL_OPTION_RESULT} ],
          <!-- END poll_option -->
        ]);
 
        var options = {
          title: "{POLL_QUESTION}",
          sliceVisibilityThreshold:0,
          backgroundColor: 'transparent',
          is3D: true,
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
    <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
    <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br />
</div>

Diagramă de bare:

Panou de administrare > Afisare > Template-uri > General > Editați template-ul viewtopic_poll_result și înlocuiți conținutul cu codul specific versiunii dvs. de forum.

PhpBB 2 :
Cod:
<tr>
  <td class="row2" colspan="2"><br clear="all" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
    
      function drawStuff() {
        var data = google.visualization.arrayToDataTable([
          ['Réponse', 'Valeur'],
          <!-- BEGIN poll_option -->
          ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
          <!-- END poll_option -->
        ]);
 
        var options = {
          legend: { position: 'none' },
          backgroundColor: 'transparent',
          vAxis: {
            format: '#\'%\'',
          },
          hAxis: {
            title: ' ',
          },
          chartArea: {
            backgroundColor: 'transparent',
          },
          chart: {
            title: "{POLL_QUESTION}",
          },
          bar: { groupWidth: "90%" }
        };
 
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
    <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
    <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br />
  </td>
</tr>

phpBB 3 :
Cod:
<div class="panel">
  <div class="inner">
    <div class="content">
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {'packages':['bar']});
        google.charts.setOnLoadCallback(drawStuff);
      
        function drawStuff() {
          var data = google.visualization.arrayToDataTable([
            ['Réponse', 'Valeur'],
            <!-- BEGIN poll_option -->
            ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
            <!-- END poll_option -->
          ]);
  
          var options = {
            legend: { position: 'none' },
            backgroundColor: 'transparent',
            vAxis: {
              format: '#\'%\'',
            },
            hAxis: {
              title: ' ',
            },
            chartArea: {
              backgroundColor: 'transparent',
            },
            chart: {
              title: "{POLL_QUESTION}",
            },
            bar: { groupWidth: "90%" }
          };
  
          var chart = new google.charts.Bar(document.getElementById('top_x_div'));
          
          chart.draw(data, google.charts.Bar.convertOptions(options));
        };
      </script>
      <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
      <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
      <div class="gen" align="center">
        {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
        <!-- BEGIN cancel_vote -->
          -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
        <!-- END cancel_vote -->
      </div>
      <br />
    </div>
  </div>
</div>

punBB :
Cod:
<div class="main-content frm">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawStuff);
  
    function drawStuff() {
      var data = google.visualization.arrayToDataTable([
        ['Réponse', 'Valeur'],
        <!-- BEGIN poll_option -->
        ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
        <!-- END poll_option -->
      ]);
 
      var options = {
        legend: { position: 'none' },
        backgroundColor: 'transparent',
        vAxis: {
          format: '#\'%\'',
        },
        hAxis: {
          title: ' ',
        },
        chartArea: {
          backgroundColor: 'transparent',
        },
        chart: {
          title: "{POLL_QUESTION}",
        },
        bar: { groupWidth: "90%" }
      };
 
      var chart = new google.charts.Bar(document.getElementById('top_x_div'));
      
      chart.draw(data, google.charts.Bar.convertOptions(options));
    };
  </script>
  <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
  <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
  <div class="gen" align="center">
    {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
    <!-- BEGIN cancel_vote -->
      -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
    <!-- END cancel_vote -->
  </div>
  <br />
</div>

Invison :
Cod:
   <div class="main">
      <div class="box-content row1">
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['bar']});
          google.charts.setOnLoadCallback(drawStuff);
        
          function drawStuff() {
            var data = google.visualization.arrayToDataTable([
              ['Réponse', 'Valeur'],
              <!-- BEGIN poll_option -->
              ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
              <!-- END poll_option -->
            ]);
      
            var options = {
              legend: { position: 'none' },
              backgroundColor: 'transparent',
              vAxis: {
                format: '#\'%\'',
              },
              hAxis: {
                title: ' ',
              },
              chartArea: {
                backgroundColor: 'transparent',
              },
              chart: {
                title: "{POLL_QUESTION}",
              },
              bar: { groupWidth: "90%" }
            };
      
            var chart = new google.charts.Bar(document.getElementById('top_x_div'));
            
            chart.draw(data, google.charts.Bar.convertOptions(options));
          };
        </script>
        <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
        <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
        <div class="gen" align="center">
          {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
          <!-- BEGIN cancel_vote -->
            -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
          <!-- END cancel_vote -->
        </div>
        <br />
      </div>
    </div>

ModernBB :
Cod:
<div class="panel">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
  
      function drawStuff() {
        var data = google.visualization.arrayToDataTable([
          ['Réponse', 'Valeur'],
          <!-- BEGIN poll_option -->
          ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
          <!-- END poll_option -->
        ]);
 
        var options = {
          legend: { position: 'none' },
          backgroundColor: 'transparent',
          vAxis: {
            format: '#\'%\'',
          },
          hAxis: {
            title: ' ',
          },
          chartArea: {
            backgroundColor: 'transparent',
          },
          chart: {
            title: "{POLL_QUESTION}",
          },
          bar: { groupWidth: "90%" }
        };
 
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
      
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
    <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
    <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        - &nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br />
    </div>

Notă:

Acest tutorial utilizează Google Charts Tool, ceea ce înseamnă că puteți modifica aceste coduri pentru a personaliza mai mult aspectul sondajului, cu cunoștințe javascript.


Tutorial realizat de Walt, tradus de @Petronel, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Petronel

Petronel
Membru onorific
Membru onorific

Mesaje : 1046
Varsta : 22
Localizare : Constanţa & Calarasi
Data înscrierii : 21/05/2016
Mulțumiri : 113
Google Chrome AwesomeBB

https://www.fgdesign.biz/
Petronel a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum