Rezultatele sondajelor sub formă de diagramă

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Rezultatele sondajelor sub formă de diagramă

Mesaj Scris de Lucifer la data de Sam 26 Aug - 22:14

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:



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



Sau (diagramă de bare):



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 -->
                &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
                &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
            &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
            &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
      &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
      &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
        &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
    &nbsp;&nbsp;-&nbsp;&nbsp;<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 -->
          &nbsp;&nbsp;-&nbsp;&nbsp;<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;&nbsp;-&nbsp;&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 scris de Walt.

Tradus de catre Lucifer. Corectat de catre Zeus.

Copyright Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Lucifer
Contribuitor suport
Contribuitor suport

masculin

Mesaje : 588
Varsta : 15
Localizare : LocalHost
Data înscrierii : 21/05/2016
Multumiri : 67
1 avertisment

https://www.fgdesign.biz/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum