Widget:Grafico: differenze tra le versioni

Da WikiLectio.
← Differenza precedenteDifferenza successiva →
VisualeWikitesto
m test
m test
Riga 1: Riga 1:
<!-- Widget:Grafico — Chart.js con supporto a 4 serie + punto di equilibrio -->
<includeonly>
<div id="chartwrap_<!--{$id|escape:'html'}-->"
<div id="chartwrap_<!--{$id|escape:'html'}-->"
     style="width:<!--{$width|default:600|escape:'html'}-->px;
     style="width:<!--{$width|default:600|escape:'html'}-->px;height:<!--{$height|default:380|escape:'html'}-->px;">
            height:<!--{$height|default:380|escape:'html'}-->px;">
   <canvas id="canvas_<!--{$id|escape:'html'}-->"
   <canvas id="canvas_<!--{$id|escape:'html'}-->"
           width="<!--{$width|default:600|escape:'html'}-->"
           width="<!--{$width|default:600|escape:'html'}-->"
Riga 38: Riga 37:
</div>
</div>


<!-- Chart.js (CDN) -->
<!-- Chart.js dal CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


{literal}
<script>
<script>
(function(){
(function(){
Riga 48: Riga 46:
   function truthy(s){ return String(s||'').toLowerCase() !== 'false'; }
   function truthy(s){ return String(s||'').toLowerCase() !== 'false'; }
   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){
    if(!title || !data) return null;
    return {
      label: title,
      data: csvToNum(data),
      type: (type || 'line'),
      fill: false,
      borderColor: color || undefined,
      backgroundColor: color || undefined,
      tension: 0,
      pointRadius: 2
    };
  }


   document.querySelectorAll("canvas[id^='canvas_']").forEach(function(c){
   document.querySelectorAll("canvas[id^='canvas_']").forEach(function(c){
Riga 73: Riga 57:
     ['series4Title','series4Data','series4Type','series4Color']
     ['series4Title','series4Data','series4Type','series4Color']
     ].forEach(function(keys){
     ].forEach(function(keys){
       var d = buildDataset(ds[keys[0].toLowerCase()], ds[keys[1].toLowerCase()], ds[keys[2].toLowerCase()], ds[keys[3].toLowerCase()]);
       var title = ds[keys[0].toLowerCase()], data = ds[keys[1].toLowerCase()],
       if(d) datasets.push(d);
          type  = ds[keys[2].toLowerCase()], color = ds[keys[3].toLowerCase()];
       if(title && data){
        datasets.push({
          label: title, data: csvToNum(data), type: (type||'line'),
          fill: false, borderColor: color||undefined, backgroundColor: color||undefined,
          tension: 0, pointRadius: 2
        });
      }
     });
     });


    // Punto di equilibrio opzionale
     var eqx = Number(ds.eqx), eqy = Number(ds.eqy);
     var eqx = Number(ds.eqx), eqy = Number(ds.eqy);
     if(!isNaN(eqx) && !isNaN(eqy)){
     if(!isNaN(eqx) && !isNaN(eqy)){
       datasets.push({
       datasets.push({
         label: 'Equilibrio',
         label: 'Equilibrio', type: 'scatter',
        type: 'scatter',
         data: [{x:eqx, y:eqy}], showLine: false, pointRadius: 5, pointHoverRadius: 6,
         data: [{x:eqx, y:eqy}],
         borderColor: '#000', backgroundColor: '#000'
        showLine: false,
        pointRadius: 5,
        pointHoverRadius: 6,
         borderColor: "#000000",
        backgroundColor: "#000000"
       });
       });
     }
     }


     var numericLabels = labels.every(l => !isNaN(Number(l)));
     var numericLabels = labels.every(l => !isNaN(Number(l)));
     var cfg = {
     new Chart(c.getContext('2d'), {
       type: 'line',
       type: 'line',
       data: { labels: labels, datasets: datasets },
       data: { labels: labels, datasets: datasets },
       options: {
       options: {
         responsive: truthy(ds.responsive),
         responsive: truthy(ds.responsive), maintainAspectRatio: false,
        maintainAspectRatio: false,
         plugins: {
         plugins: {
           title: { display: !!ds.title, text: ds.title },
           title: { display: !!ds.title, text: ds.title },
           legend: { display: truthy(ds.showLegend) },
           legend: { display: truthy(ds.showLegend) }, tooltip: { enabled: true }
          tooltip: { enabled: true }
         },
         },
         elements: { line: { borderWidth: 2 } },
         elements: { line: { borderWidth: 2 } },
         scales: {
         scales: {
           x: numericLabels ? {
           x: numericLabels ? {
             type: 'linear',
             type: 'linear', title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' },
            title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' },
             min: numOrUndef(ds.xmin), max: numOrUndef(ds.xmax)
             min: numOrUndef(ds.xmin), max: numOrUndef(ds.xmax)
           } : {
           } : {
             type: 'category',
             type: 'category', title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' }
            title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' }
           },
           },
           y: {
           y: {
             title: { display: true, text: ds.yTitle || "Prezzo dell'affitto" },
             title: { display: true, text: ds.yTitle || "Prezzo dell'affitto" },
             min: numOrUndef(ds.ymin), max: numOrUndef(ds.ymax),
             min: numOrUndef(ds.ymin), max: numOrUndef(ds.ymax), beginAtZero: false
            beginAtZero: false
           }
           }
         }
         }
       }
       }
     };
     });
 
    new Chart(c.getContext('2d'), cfg);
   });
   });
})();
})();
</script>
</script>
{/literal}
</includeonly>

Versione delle 16:40, 19 set 2025

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