|
|
| (19 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> | | <!-- Config INI dentro <pre hidden> --> |
| | <pre id="cfg_<!--{$id}-->" hidden> |
| | id=<!--{$id}--> |
| | title=<!--{$title}--> |
| | xTitle=<!--{$xTitle}--> |
| | yTitle=<!--{$yTitle}--> |
| | labels=<!--{$labels}--> |
| | |
| | series1title=<!--{$series1title}--> |
| | series1data=<!--{$series1data}--> |
| | series1type=<!--{$series1type}--> |
| | series1color=<!--{$series1color}--> |
|
| |
|
| <!-- Chart.js locale --> | | series2title=<!--{$series2title}--> |
| <script src="/resources/chart.umd.js"></script> | | series2data=<!--{$series2data}--> |
| | series2type=<!--{$series2type}--> |
| | series2color=<!--{$series2color}--> |
|
| |
|
| <script> | | series3title=<!--{$series3title}--> |
| (function(){
| | series3data=<!--{$series3data}--> |
| var id = "<!--{$id|escape:'html'}-->";
| | series3type=<!--{$series3type}--> |
| var c = document.getElementById("canvas_" + id);
| | series3color=<!--{$series3color}--> |
| var msg = document.getElementById("msg_" + id);
| |
|
| |
|
| if (!c) { if (msg) msg.textContent = "Canvas non trovato (id="+id+")"; return; }
| | series4title=<!--{$series4title}--> |
| if (typeof Chart === "undefined") { if (msg) msg.textContent = "Chart.js locale non caricato: controlla /resources/chart.umd.js"; return; }
| | series4data=<!--{$series4data}--> |
| | series4type=<!--{$series4type}--> |
| | series4color=<!--{$series4color}--> |
|
| |
|
| try {
| | eqX=<!--{$eqX}--> |
| var labels = [0, 2, 4, 6, 8, 10];
| | eqY=<!--{$eqY}--> |
| var data1 = [10, 8, 6, 4, 2, 0]; // Domanda
| | showLegend=<!--{$showLegend}--> |
| var data2 = [0, 2, 4, 6, 8, 10]; // Offerta
| | responsive=<!--{$responsive}--> |
| | xMin=<!--{$xMin}--> |
| | xMax=<!--{$xMax}--> |
| | yMin=<!--{$yMin}--> |
| | yMax=<!--{$yMax}--> |
| | </pre> |
|
| |
|
| new Chart(c.getContext('2d'), {
| | <!-- opzionale: area debug tenuta nascosta --> |
| type: 'line',
| | <pre id="debug_<!--{$id}-->" hidden></pre> |
| data: {
| | </div> |
| labels: labels,
| |
| datasets: [
| |
| {
| |
| label:'Domanda',
| |
| data: data1,
| |
| borderColor: '#d62728', // rosso visibile
| |
| backgroundColor: '#d62728',
| |
| borderWidth: 2,
| |
| pointRadius: 3,
| |
| fill: false,
| |
| tension: 0
| |
| },
| |
| {
| |
| label:'Offerta',
| |
| data: data2,
| |
| borderColor: '#1f77b4', // blu visibile
| |
| backgroundColor: '#1f77b4',
| |
| borderWidth: 2,
| |
| pointRadius: 3,
| |
| fill: false,
| |
| 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> | |
|
| |
|
| | <script src="/resources/chart.umd.js" defer></script> |
| | <script src="/resources/widget-grafico.js" defer></script> |
| </includeonly> | | </includeonly> |
