Widget:Grafico: differenze tra le versioni

Da WikiLectio.
← Differenza precedenteDifferenza successiva →
VisualeWikitesto
m test
m test
Riga 35: Riga 35:
           data-ymax="<!--{$yMax|escape:'html'}-->"
           data-ymax="<!--{$yMax|escape:'html'}-->"
   ></canvas>
   ></canvas>
  <div id="chartmsg_<!--{$id|escape:'html'}-->" style="font-size:12px;color:#a00;margin-top:4px;"></div>
</div>
</div>


<!-- Chart.js (CDN) -->
<!-- Chart.js (CDN). Se il tuo hosting/CSP lo blocca, più sotto ti metto l'opzione "file locale". -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


Riga 47: Riga 48:
   function numOrUndef(s){ const n = Number(s); return isNaN(n) ? undefined : n; }
   function numOrUndef(s){ const n = Number(s); return isNaN(n) ? undefined : n; }


   function buildDataset(title, data, type, color){
   var id = "<!--{$id|escape:'html'}-->";
    if(!title || !data) return null;
  var c  = document.getElementById("canvas_" + id);
     return {
  var msg = document.getElementById("chartmsg_" + id);
      label: title,
 
      data: csvToNum(data),
  if (!c) {
      type: (type || 'line'),
     console.error("[Widget:Grafico] canvas non trovato per id=", id);
      fill: false,
    if (msg) msg.textContent = "Errore: canvas non trovato (id="+id+").";
      borderColor: color || undefined,
     return;
      backgroundColor: color || undefined,
      tension: 0,
      pointRadius: 2
     };
   }
   }


   document.querySelectorAll("canvas[id^='canvas_']").forEach(function(c){
   // 1) Verifica che Chart.js sia caricato
  if (typeof Chart === "undefined") {
    if (msg) msg.textContent = "Chart.js non caricato (CDN bloccato dalla tua rete/CSP). Vedi istruzioni più sotto per caricarlo in locale.";
    console.error("[Widget:Grafico] Chart.js non definito: probabilmente il CDN è bloccato.");
    return;
  }
 
  try {
     var ds = c.dataset;
     var ds = c.dataset;
     var labels = csvToArray(ds.labels);
     var labels = csvToArray(ds.labels);


    // ATTENZIONE: dataset usa CAMEL CASE per i data-attributes con trattini
     var series = [
    // Esempio: data-series1-title -> ds.series1Title (non "series1title")
     var datasets = [];
    var seriesDefs = [
       { t: ds.series1Title, d: ds.series1Data, ty: ds.series1Type, c: ds.series1Color },
       { t: ds.series1Title, d: ds.series1Data, ty: ds.series1Type, c: ds.series1Color },
       { t: ds.series2Title, d: ds.series2Data, ty: ds.series2Type, c: ds.series2Color },
       { t: ds.series2Title, d: ds.series2Data, ty: ds.series2Type, c: ds.series2Color },
Riga 74: Riga 75:
       { t: ds.series4Title, d: ds.series4Data, ty: ds.series4Type, c: ds.series4Color }
       { t: ds.series4Title, d: ds.series4Data, ty: ds.series4Type, c: ds.series4Color }
     ];
     ];
     seriesDefs.forEach(function(s){
 
       var d = buildDataset(s.t, s.d, s.ty, s.c);
    var datasets = [];
       if(d) datasets.push(d);
     series.forEach(function(s, i){
       if (s.t && s.d) {
        datasets.push({
          label: s.t,
          data: csvToNum(s.d),
          type: (s.ty || 'line'),
          fill: false,
          borderColor: s.c || undefined,
          backgroundColor: s.c || undefined,
          tension: 0,
          pointRadius: 2
        });
       }
     });
     });


Riga 94: Riga 107:
     }
     }


     var numericLabels = labels.every(l => !isNaN(Number(l)));
     var numericLabels = labels.every(function(l){ return !isNaN(Number(l)); });
 
     new Chart(c.getContext('2d'), {
     new Chart(c.getContext('2d'), {
       type: 'line',
       type: 'line',
Riga 124: Riga 138:
       }
       }
     });
     });
   });
 
    if (msg) msg.textContent = ""; // pulisci eventuale messaggio
   } catch (e) {
    console.error("[Widget:Grafico] Errore durante il rendering:", e);
    if (msg) msg.textContent = "Errore nel rendering del grafico: " + (e && e.message ? e.message : e);
  }
})();
})();
</script>
</script>
</includeonly>
</includeonly>

Versione delle 16:56, 19 set 2025

Estratto da "https://wikilectio.it/index.php?title=Widget:Grafico&oldid=205"