Widget:Grafico: differenze tra le versioni
Da WikiLectio.
m test |
m test |
||
| Riga 1: | Riga 1: | ||
<includeonly> | <includeonly> | ||
<div style="padding:8px;border:2px dashed #888;width:<!--{$width|default:600|escape:'html'}-->px | <div id="wrap_<!--{$id|escape:'html'}-->" style="padding:8px;border:2px dashed #888;width:<!--{$width|default:600|escape:'html'}-->px;"> | ||
CANVAS TEST | CANVAS TEST 3 — id: <!--{$id|escape:'html'}--> | ||
<br/> | <br/> | ||
<canvas id="canvas_<!--{$id|escape:'html'}-->" width=" | <canvas id="canvas_<!--{$id|escape:'html'}-->" width="<!--{$width|default:600|escape:'html'}-->" height="200" style="border:1px solid #ccc;"></canvas> | ||
<div id="msg_<!--{$id|escape:'html'}-->" style="font-size:12px;color:#a00;margin-top:4px;"></div> | |||
</div> | </div> | ||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |||
<script> | |||
(function(){ | |||
var id = "<!--{$id|escape:'html'}-->"; | |||
var c = document.getElementById("canvas_" + id); | |||
var m = document.getElementById("msg_" + id); | |||
if(!c){ if(m) m.textContent = "Canvas non trovato"; return; } | |||
if(typeof Chart === "undefined"){ if(m) m.textContent = "Chart.js non caricato (CDN bloccato?)"; return; } | |||
new Chart(c.getContext('2d'), { | |||
type: 'line', | |||
data: { labels: [0,2,4,6,8,10], datasets: [{label:'Demo', data:[0,2,4,6,8,10]}] }, | |||
options: { responsive:false } | |||
}); | |||
})(); | |||
</script> | |||
</includeonly> | </includeonly> | ||
