https://www.loom.com/share/506e2860352344c1851f22e257329153?sid=2b426d6b-f666-49ec-bd1b-f90220a46813
Código no componente de JavaScript
:
window.top.postMessage({ event: "eventoPaginaGrafico",
detail: {
labels: ['Categoria 1', 'Categoria 2', 'Categoria 3', 'Categoria 4', 'Categoria 5'],
valores: ['{{{valor_1}}}', '{{{valor_2}}}', '{{{valor_3}}}', '{{{valor_4}}}', '{{{valor_5}}}'],
title: "Quiz do conhecimento"
}
}, '*');
Merlin.setVariable("html",`<div id="div-radar"><canvas id="meuChart"></canvas></div>`);
Código na aba de Customize o CSS
:
#div-radar{
width: 100%;
height: 400px;
display: flex;
justify-content: center;
}
#meuRadarChart{
height: 400px !important;
}
Código na aba Adicione um código javascript
:
<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var globalChart = null;
var eventData = null;
function criarOuAtualizarGrafico(canvas, dados) {
var ctx = canvas.getContext('2d');
if (globalChart) {
globalChart.destroy();
}
globalChart = new Chart(ctx, {
type: 'radar',
data: {
labels: dados.labels,
datasets: [{
label: dados.title || 'Dados do Radar',
data: dados.valores,
fill: true,
backgroundColor: '#5c40f585',
borderColor: '#5c40f5',
pointBackgroundColor: '#5c40f5',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: '#5c40f5'
}]
},
options: {
scales: {
r: {
beginAtZero: true,
ticks: {
beginAtZero: true,
min: 0
}
}
},
elements: {
line: {
borderWidth: 3
}
}
}
});
}
window.addEventListener('message', function(event) {
if (event.data.event === "eventoPaginaGrafico") {
eventData = event.data.detail;
verificarEAtualizarGrafico();
}
});
function verificarEAtualizarGrafico() {
var canvas = document.getElementById('div-radar');
if (canvas && eventData) {
let canva = document.createElement('canvas');
canva.id = "meuChart";
canvas.appendChild(canva);
criarOuAtualizarGrafico(canva, eventData);
eventData = null;
}
}
const observer = new MutationObserver(() => {
verificarEAtualizarGrafico();
});
observer.observe(document.body, { childList: true, subtree: true });
});
</script>