Widget:Grafico: differenze tra le versioni

Da WikiLectio.
m tet
m downgrade
Etichetta: Ripristino manuale
 
(20 versioni intermedie di uno stesso utente non sono mostrate)
Riga 1: Riga 1:
<script>
<includeonly>
(function(){
<div id="chartwrap_<!--{$id}-->"
  var id  = "<!--{$id|escape:'html'}-->";
    style="width:<!--{$width|default:600}-->px;height:<!--{$height|default:380}-->px;">
   var c  = document.getElementById("canvas_" + id);
   <canvas id="canvas_<!--{$id}-->"
  var msg = document.getElementById("msg_" + id);
          width="<!--{$width|default:600}-->"
          height="<!--{$height|default:380}-->"></canvas>


   if (!c) { if (msg) msg.textContent = "Canvas non trovato (id="+id+")"; return; }
   <!-- Config INI dentro <pre hidden> -->
  if (typeof Chart === "undefined") { if (msg) msg.textContent = "Chart.js locale non caricato: controlla /resources/chart.umd.js"; return; }
  <pre id="cfg_<!--{$id}-->" hidden>
id=<!--{$id}-->
title=<!--{$title}-->
xTitle=<!--{$xTitle}-->
yTitle=<!--{$yTitle}-->
labels=<!--{$labels}-->


  try {
series1title=<!--{$series1title}-->
    var labels = [0, 2, 4, 6, 8, 10];
series1data=<!--{$series1data}-->
    var data1  = [10, 8, 6, 4, 2, 0];  // Domanda
series1type=<!--{$series1type}-->
    var data2  = [0,  2, 4, 6, 8, 10];  // Offerta
series1color=<!--{$series1color}-->


    new Chart(c.getContext('2d'), {
series2title=<!--{$series2title}-->
      type: 'line',
series2data=<!--{$series2data}-->
      data: {
series2type=<!--{$series2type}-->
        labels: labels,
series2color=<!--{$series2color}-->
        datasets: [
 
          {
series3title=<!--{$series3title}-->
            label:'Domanda',
series3data=<!--{$series3data}-->
            data: data1,
series3type=<!--{$series3type}-->
            borderColor: '#d62728',      // rosso visibile
series3color=<!--{$series3color}-->
            backgroundColor: '#d62728',
 
            borderWidth: 2,
series4title=<!--{$series4title}-->
            pointRadius: 3,
series4data=<!--{$series4data}-->
            fill: false,
series4type=<!--{$series4type}-->
            tension: 0
series4color=<!--{$series4color}-->
          },
 
          {
eqX=<!--{$eqX}-->
            label:'Offerta',
eqY=<!--{$eqY}-->
            data: data2,
showLegend=<!--{$showLegend}-->
            borderColor: '#1f77b4',      // blu visibile
responsive=<!--{$responsive}-->
            backgroundColor: '#1f77b4',
xMin=<!--{$xMin}-->
            borderWidth: 2,
xMax=<!--{$xMax}-->
            pointRadius: 3,
yMin=<!--{$yMin}-->
            fill: false,
yMax=<!--{$yMax}-->
            tension: 0
  </pre>
          }
 
        ]
  <!-- opzionale: area debug tenuta nascosta -->
      },
  <pre id="debug_<!--{$id}-->" hidden></pre>
      options: {
</div>
        responsive: false,
 
        maintainAspectRatio: false,
<script src="/resources/chart.umd.js" defer></script>
        plugins: {
<script src="/resources/widget-grafico.js" defer></script>
          title: { display: true, text: 'Mercato affitti (demo)' },
</includeonly>
          legend: { display: true }
        },
        scales: {
          x: {
            type: 'category',
            title: { display: true, text: 'Quantità' },
            grid: { display: true }
          },
          y: {
            title: { display: true, text: 'Prezzo' },
            min: 0,
            max: 12,
            grid: { display: true }
          }
        }
      }
    });
    if (msg) msg.textContent = "";
  } catch (e) {
    if (msg) msg.textContent = "Errore rendering: " + (e && e.message ? e.message : e);
    console.error("[Widget:Grafico] errore:", e);
  }
})();
</script>

Versione attuale delle 22:36, 23 set 2025