|
|
| (18 versioni intermedie di uno stesso utente non sono mostrate) |
| 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}-->" |
| <div style="font-size:12px;color:#555;margin-bottom:6px;">
| | style="width:<!--{$width|default:600}-->px;height:<!--{$height|default:380}-->px;"> |
| Widget Grafico — test base (id: <!--{$id|escape:'html'}-->)
| | <canvas id="canvas_<!--{$id}-->" |
| </div>
| | width="<!--{$width|default:600}-->" |
| <canvas id="canvas_<!--{$id|escape:'html'}-->" width="600" height="240" style="border:1px solid #ddd;"></canvas> | | height="<!--{$height|default:380}-->"></canvas> |
| <div id="msg_<!--{$id|escape:'html'}-->" style="font-size:12px;color:#a00;margin-top:6px;"></div>
| |
| </div>
| |
|
| |
|
| <!-- Chart.js locale --> | | <!-- Config INI dentro <pre hidden> --> |
| <script src="/resources/chart.umd.js"></script> | | <pre id="cfg_<!--{$id}-->" hidden> |
| | id=<!--{$id}--> |
| | title=<!--{$title}--> |
| | xTitle=<!--{$xTitle}--> |
| | yTitle=<!--{$yTitle}--> |
| | labels=<!--{$labels}--> |
|
| |
|
| <script> | | series1title=<!--{$series1title}--> |
| (function(){
| | series1data=<!--{$series1data}--> |
| var id = "<!--{$id|escape:'html'}-->";
| | series1type=<!--{$series1type}--> |
| var c = document.getElementById("canvas_" + id);
| | series1color=<!--{$series1color}--> |
| var msg = document.getElementById("msg_" + id);
| |
|
| |
|
| if (!c) { if (msg) msg.textContent = "Canvas non trovato (id="+id+")"; return; }
| | series2title=<!--{$series2title}--> |
| var ctx = c.getContext('2d');
| | series2data=<!--{$series2data}--> |
| | series2type=<!--{$series2type}--> |
| | series2color=<!--{$series2color}--> |
|
| |
|
| // 0) Traccia DIAGONALE raw canvas (debug): se la vedi, il canvas è ok
| | series3title=<!--{$series3title}--> |
| ctx.strokeStyle = '#bbb';
| | series3data=<!--{$series3data}--> |
| ctx.lineWidth = 1;
| | series3type=<!--{$series3type}--> |
| ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(c.width, c.height); ctx.stroke();
| | series3color=<!--{$series3color}--> |
|
| |
|
| // 1) Verifica Chart.js locale
| | series4title=<!--{$series4title}--> |
| if (typeof Chart === "undefined") {
| | series4data=<!--{$series4data}--> |
| if (msg) msg.textContent = "Chart.js locale non caricato: controlla /resources/chart.umd.js";
| | series4type=<!--{$series4type}--> |
| return;
| | series4color=<!--{$series4color}--> |
| }
| |
|
| |
|
| // 2) REGISTRA esplicitamente i componenti (fix per build che non autoincludono)
| | eqX=<!--{$eqX}--> |
| try {
| | eqY=<!--{$eqY}--> |
| if (Chart && Chart.register && Chart.registerables) {
| | showLegend=<!--{$showLegend}--> |
| Chart.register(...Chart.registerables);
| | responsive=<!--{$responsive}--> |
| }
| | xMin=<!--{$xMin}--> |
| } catch (e) {
| | xMax=<!--{$xMax}--> |
| console.warn("[Widget:Grafico] impossibile registrare i registrables:", e);
| | yMin=<!--{$yMin}--> |
| }
| | yMax=<!--{$yMax}--> |
| | | </pre> |
| // 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> | |
|
| |
|
| | <!-- opzionale: area debug tenuta nascosta --> |
| | <pre id="debug_<!--{$id}-->" hidden></pre> |
| | </div> |
|
| |
|
| | <script src="/resources/chart.umd.js" defer></script> |
| | <script src="/resources/widget-grafico.js" defer></script> |
| </includeonly> | | </includeonly> |
