Widget:Grafico: differenze tra le versioni

Da WikiLectio.
← Differenza precedenteDifferenza successiva →
VisualeWikitesto
m test
m test
Riga 1: Riga 1:
<includeonly>
<includeonly>
<div id="wrap_<!--{$id|escape:'html'}-->" style="padding:8px;border:1px solid #ccc;width:620px;">
<div id="chartwrap_<!--{$id|escape:'html'}-->"
  <div style="font-size:12px;color:#555;margin-bottom:6px;">
    style="width:<!--{$width|default:600|escape:'html'}-->px;height:<!--{$height|default:380|escape:'html'}-->px;">
    Widget Grafico — test base (id: <!--{$id|escape:'html'}-->)
  <canvas id="canvas_<!--{$id|escape:'html'}-->"
  </div>
          width="<!--{$width|default:600|escape:'html'}-->"
  <canvas id="canvas_<!--{$id|escape:'html'}-->" width="600" height="240" style="border:1px solid #ddd;"></canvas>
          height="<!--{$height|default:380|escape:'html'}-->"
   <div id="msg_<!--{$id|escape:'html'}-->" style="font-size:12px;color:#a00;margin-top:6px;"></div>
          data-id="<!--{$id|escape:'html'}-->"
          data-title="<!--{$title|escape:'html'}-->"
          data-x-title="<!--{$xTitle|escape:'html'}-->"
          data-y-title="<!--{$yTitle|escape:'html'}-->"
          data-labels="<!--{$labels|escape:'html'}-->"
          data-series1-title="<!--{$series1title|escape:'html'}-->"
          data-series1-data="<!--{$series1data|escape:'html'}-->"
          data-series1-type="<!--{$series1type|escape:'html'}-->"
          data-series1-color="<!--{$series1color|escape:'html'}-->"
          data-series2-title="<!--{$series2title|escape:'html'}-->"
          data-series2-data="<!--{$series2data|escape:'html'}-->"
          data-series2-type="<!--{$series2type|escape:'html'}-->"
          data-series2-color="<!--{$series2color|escape:'html'}-->"
          data-series3-title="<!--{$series3title|escape:'html'}-->"
          data-series3-data="<!--{$series3data|escape:'html'}-->"
          data-series3-type="<!--{$series3type|escape:'html'}-->"
          data-series3-color="<!--{$series3color|escape:'html'}-->"
          data-series4-title="<!--{$series4title|escape:'html'}-->"
          data-series4-data="<!--{$series4data|escape:'html'}-->"
          data-series4-type="<!--{$series4type|escape:'html'}-->"
          data-series4-color="<!--{$series4color|escape:'html'}-->"
          data-eqx="<!--{$eqX|escape:'html'}-->"
          data-eqy="<!--{$eqY|escape:'html'}-->"
          data-show-legend="<!--{$showLegend|escape:'html'}-->"
          data-responsive="<!--{$responsive|escape:'html'}-->"
          data-xmin="<!--{$xMin|escape:'html'}-->"
          data-xmax="<!--{$xMax|escape:'html'}-->"
          data-ymin="<!--{$yMin|escape:'html'}-->"
          data-ymax="<!--{$yMax|escape:'html'}-->"
  ></canvas>
   <div id="chartmsg_<!--{$id|escape:'html'}-->" style="font-size:12px;color:#a00;margin-top:4px;"></div>
</div>
</div>


<!-- Chart.js locale -->
<!-- Librerie JS (esterne, niente inline) -->
<script src="/resources/chart.umd.js"></script>
<script src="/resources/chart.umd.js"></script>
 
<script src="/resources/widget-grafico.js"></script>
<script>
(function(){
  var id  = "<!--{$id|escape:'html'}-->";
  var c  = document.getElementById("canvas_" + id);
  var msg = document.getElementById("msg_" + id);
 
  if (!c) { if (msg) msg.textContent = "Canvas non trovato (id="+id+")"; return; }
  var ctx = c.getContext('2d');
 
  // 0) Traccia DIAGONALE raw canvas (debug): se la vedi, il canvas è ok
  ctx.strokeStyle = '#bbb';
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(c.width, c.height); ctx.stroke();
 
  // 1) Verifica Chart.js locale
  if (typeof Chart === "undefined") {
    if (msg) msg.textContent = "Chart.js locale non caricato: controlla /resources/chart.umd.js";
    return;
  }
 
  // 2) REGISTRA esplicitamente i componenti (fix per build che non autoincludono)
  try {
    if (Chart && Chart.register && Chart.registerables) {
      Chart.register(...Chart.registerables);
    }
  } catch (e) {
    console.warn("[Widget:Grafico] impossibile registrare i registrables:", e);
  }
 
  // 3) Costruisci il grafico DEMO
  try {
    var labels = [0, 2, 4, 6, 8, 10];
    var data1  = [10, 8, 6, 4, 2, 0];  // Domanda
    var data2  = [0,  2, 4, 6, 8, 10];  // Offerta
 
    // pulisci la diagonale di debug prima di disegnare il grafico
    ctx.clearRect(0, 0, c.width, c.height);
 
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            label:'Domanda',
            data: data1,
            borderColor: '#d62728',
            backgroundColor: '#d62728',
            borderWidth: 2,
            pointRadius: 3,
            tension: 0
          },
          {
            label:'Offerta',
            data: data2,
            borderColor: '#1f77b4',
            backgroundColor: '#1f77b4',
            borderWidth: 2,
            pointRadius: 3,
            tension: 0
          }
        ]
      },
      options: {
        responsive: false,
        maintainAspectRatio: false,
        plugins: {
          title: { display: true, text: 'Mercato affitti (demo)' },
          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>
 
 
 
</includeonly>
</includeonly>

Versione delle 01:05, 20 set 2025

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