Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2024
    Messaggi
    4

    calcolo barre percentuale influisce su attributo width

    Buongiorno! Sto facendo del mio meglio per creare un questionario responsive che, grazie a domande con risposte pesate, possa fornire la rappresentazione grafica del servizio più utile, proprio tramite barre di percentuale decrescenti.
    La logica che utilizzo per il calcolo è questa:
    Codice PHP:
    // Inizializza i punteggi dei servizi
                $punteggi_servizi = array(
                    'servizio1' => 0,
                    'servizio2' => 0, 
                    //etc etc con i vari servizi
                );

                            // Calcola i punteggi per ciascun servizio basato sulle risposte
                foreach ($punteggi_servizi as $servizio => &$punteggio) {
                    foreach ($punteggi as $domanda => $risposte) {
                        if (isset($pesi[$servizio][$domanda])) {
                            foreach ($risposte as $risposta) {
                                if (isset($pesi[$servizio][$domanda][$risposta])) {
                                    $punteggio += $pesi[$servizio][$domanda][$risposta];
                                }
                            }
                        }
                    }
                }
                unset($punteggio); 

                // Ordina i servizi per punteggio decrescente
                arsort($punteggi_servizi);

                echo '<center><h2>I servizi più adatti a te:</h2></center>';
                echo '<table style="border-width: 0px 0 0 0px;">'; 
                echo '<tr>'; 

                $counter = 0; 

                foreach ($punteggi_servizi as $servizio => $punteggio) {
                    // Calcolo della percentuale basata sul punteggio massimo
                    $percentuale = ($punteggi_servizi['servizio1'] > 0) ? ($punteggio / $punteggi_servizi['servizio1']) *100 : 0;

                    echo '<td style="display: grid;">'; 
                    echo '<li style="display: flex;">';
                    echo '<div class="progress-bar">';
                    echo '<div class="progress" style="width: ' . $percentuale . '%;">';
                    echo '<span class="service-name">' . $servizio . '</span>';
                    echo '</div>';

    echo'</div>';[ /PHP ]

    il css delle barre è: 
    [ PHP ].progress-bar-container {display: flex;
    align-items: center;
    }

    .progress-bar {
    background-color: #e0e0e0;
    border-radius: 13px;
    padding: 3px 10px; 
    margin: 10px 0;
    flex: 1;
    position: relative; 
    }

    .progress {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #76c7c0;
        height: 55px;
        border-radius: 10px;
        position: relative;
        //max-width: 100%; 
        //width: <?php echo min($percentuale100); ?>%; 
    }

    come però poi si può notare da inspector, una volta calcolati i risultati pesati in base alle risposte date esce così:
    codice:
    <div class="progress-bar">
    <div class="progress" style="width: 487.5%;"><span class="service-name">servizio1</span>
    </div>
    </div>
    per cui, varie barre di percentuale escono inevitabilmente dallo schermo. Hoi provato con max-width, ho provato a reimpostare la percentuale nel calcolo, vari tipi di limitazioni e di modifica del css ma non ne vengo a capo.
    Magari sarà semplice, ma mi sto scervellando e non ci riesco. Qualcuno ha dunque un'idea che mi possa aiutare? Grazie in anticipo e un'ottima giornata!

  2. #2
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    12,458
    Dovresti normalizzare i dati ottenuti ad una soglia limite, avendo percentuali ti consiglierei di provare con 100.
    In questo modo decidi la lunghezza massima della barra e quello sarà il 100%, le altre verranno di conseguenza più corte.

    La formula per la normalizzazione a 100 è la seguente
    codice:
    di = (xi – min(x)) / (max(x) – min(x)) * 100
    in cui
    di è il valore normalizzato del dato i-esimo (il valore che sai calcolando)
    xi è il valore che ti arriva per il dato in esame
    min(x) è il valore minimo tra tutti i dati che ti arrivano
    max(x) è il valore massimo tra tutti i dati che ti arrivano

    quindi dai dati originali che ti arrivano dovrai calcolare il minimo ed il massimo, poi con un ciclo applichi la formula di sopra ad ogni dato e ne ottieni il valore normalizzato, usi questi valori per dimensionare le barre con la % su width.

    P.S. quando metti i tag per i codice, non mettere spazi nelle parentesi, quindi [code] e [php]

  3. #3
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,685
    Quote Originariamente inviata da Alhazred
    P.S. quando metti i tag per i codice, non mettere spazi nelle parentesi, quindi [code] e [php]
    ho fatto io la correzione

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2024
    Messaggi
    4
    Evviva!!! Grazie ragazzi perfetto!!

    Ecco il codice, magari potrebbe servire a qualcun altro che avrà il mio stesso problema (manca la parte js).
    Codice PHP:
     // Inizializza i punteggi dei servizi
    $punteggi_servizi = array(    'Servizio1' => 0,    'Servizio2' => 0,    
    // altri servizi...);

    // Calcola i punteggi per ciascun servizio basato sulle risposte
    foreach ($punteggi_servizi as $servizio => &$punteggio
    {    foreach (
    $punteggi as $domanda => $risposte)
     {        if (isset(
    $pesi[$servizio][$domanda])) 
    {            foreach (
    $risposte as $risposta
    {                if (isset(
    $pesi[$servizio][$domanda][$risposta])) 
    {                    
    $punteggio += $pesi[$servizio][$domanda][$risposta];
                    
    }            
    }        
    }    }}

    unset(
    $punteggio);

    // Ordina i servizi per punteggio decrescentearsort($punteggi_servizi);

    // Calcolo del minimo e massimo punteggio$min_punteggio = min($punteggi_servizi);$max_punteggio = max($punteggi_servizi);

    echo '<center><h2>I servizi più adatti a te:</h2></center>';echo '<table style="border-width: 0px 0 0 0px;">'// Inizia la tabellaecho '<tr>'; // Inizia la riga della tabella
    $counter 0

    // Inizializza il contatore
    foreach ($punteggi_servizi as $servizio => $punteggio) {    // Calcolo della percentuale normalizzata    $percentuale = ($max_punteggio > $min_punteggio) ? (($punteggio - $min_punteggio) / ($max_punteggio - $min_punteggio)) * 100 : 0;        

    echo '<td style="display: grid;">'// Inizia una nuova cella nella tabella    
    echo '<li style="display: flex;">';    
    echo 
    '<div class="progress-bar">';    
    echo 
    '<div class="progress" style="width: ' $percentuale '%;">';    
    echo 
    '<span class="service-name">' $servizio '</span>';    
    echo 
    '</div>';    echo '</div>';} 
    Grazie per le dritte e la correzione a Vincent.Zeno e ad Alhazred! Un'ottima giornata! ☀ (ho provato a rimodificare il codice per farvelo vedere bene con la corretta formattazione ma non va, sbaglierò qualcosa, mi spiace)
    Ultima modifica di Indi22; 14-06-2024 a 15:47

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.