Widget:Grafico: differenze tra le versioni

Da WikiLectio.
← Differenza precedenteDifferenza successiva →
VisualeWikitesto
m test
m test
Riga 37: Riga 37:
</div>
</div>


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


Riga 46: 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){
     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
    // Esempio: data-series1-title -> ds.series1Title (non "series1title")
     var datasets = [];
     var datasets = [];
 
     var seriesDefs = [
     [['series1Title','series1Data','series1Type','series1Color'],
      { t: ds.series1Title, d: ds.series1Data, ty: ds.series1Type, c: ds.series1Color },
    ['series2Title','series2Data','series2Type','series2Color'],
      { t: ds.series2Title, d: ds.series2Data, ty: ds.series2Type, c: ds.series2Color },
    ['series3Title','series3Data','series3Type','series3Color'],
      { t: ds.series3Title, d: ds.series3Data, ty: ds.series3Type, c: ds.series3Color },
    ['series4Title','series4Data','series4Type','series4Color']
      { t: ds.series4Title, d: ds.series4Data, ty: ds.series4Type, c: ds.series4Color }
     ].forEach(function(keys){
    ];
       var title = ds[keys[0].toLowerCase()], data = ds[keys[1].toLowerCase()],
     seriesDefs.forEach(function(s){
          type  = ds[keys[2].toLowerCase()], color = ds[keys[3].toLowerCase()];
       var d = buildDataset(s.t, s.d, s.ty, s.c);
       if(title && data){
       if(d) datasets.push(d);
        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', type: 'scatter',
         label: 'Equilibrio',
         data: [{x:eqx, y:eqy}], showLine: false, pointRadius: 5, pointHoverRadius: 6,
        type: 'scatter',
         borderColor: '#000', backgroundColor: '#000'
         data: [{x:eqx, y:eqy}],
        showLine: false,
        pointRadius: 5,
        pointHoverRadius: 6,
         borderColor: '#000',
        backgroundColor: '#000'
       });
       });
     }
     }
Riga 82: Riga 99:
       data: { labels: labels, datasets: datasets },
       data: { labels: labels, datasets: datasets },
       options: {
       options: {
         responsive: truthy(ds.responsive), maintainAspectRatio: false,
         responsive: truthy(ds.responsive),
        maintainAspectRatio: false,
         plugins: {
         plugins: {
           title: { display: !!ds.title, text: ds.title },
           title: { display: !!ds.title, text: ds.title },
           legend: { display: truthy(ds.showLegend) }, tooltip: { enabled: true }
           legend: { display: truthy(ds.showLegend) },
          tooltip: { enabled: true }
         },
         },
         elements: { line: { borderWidth: 2 } },
         elements: { line: { borderWidth: 2 } },
         scales: {
         scales: {
           x: numericLabels ? {
           x: numericLabels ? {
             type: 'linear', title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' },
             type: 'linear',
            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', title: { display: true, text: ds.xTitle || 'Quantità di appartamenti' }
             type: 'category',
            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), beginAtZero: false
             min: numOrUndef(ds.ymin), max: numOrUndef(ds.ymax),
            beginAtZero: false
           }
           }
         }
         }

Versione delle 16:48, 19 set 2025

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