Disegnatore Riconosciuto
- Group
- Developer
- Posts
- 14,630
- Reputazione
- +589
- Status
- Offline
|
|
Avete un Forum/Blog GDR nel quale vorreste far ruolare i vostri utenti dando statistiche e grafici in base ai punti ottenuti e alle Statistiche del personaggio ?
In rete si trova un po' di tutto, ma qui viene presentato un tipo di grafico detto Radar Chart (in inglese).
Cosa sarebbe 'sta cosa ? E' presto illustrato qui di seguito:
 
In base alle vostre esigenze è possibile dare uno sfondo di un colore piuttosto che di un altro, di default lo sfondo dei codici forniti è nero.
Qui potete trovare un Topic in cui il tutto funziona: https://skullbones.forumfree.it/?t=80086861
(E' il Forum dove abbiamo testato il tutto)
ATTENZIONE ! Qui di seguito vengono forniti tutti i codici necessari, trovate anche vari commenti e Credits.
Codice da inserire Obbligatoriamente in Amministrazione --> Sito Web --> Statistiche e Opzioni (sezione Head in basso):
CODICE <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
Codice HTML che verrà mostrato in CIMA a tutte la Pagine:
HTML <!-- RADAR CHART (Prima Parte) -->
<!-- Special THANKS to Codepen & Alfiere2 -->
<!-- Original Code: https://codepen.io/haxen2000/pen/jBVMqK -->
<script type="text/javascript">
var options = {
title: { display: true, fontColor: '#ff0', fontStyle: 'regular', fullWidth: false, text: ''
}, legend: { fullWidth: false, labels: { fontColor: '#fff', boxWidth: 0 } },
elements: { line: { } },
scale: { angleLines: { color: '#777' },
gridLines: { color: '#666' },
pointLabels: { fontColor: '#fff' }, ticks: { min: 0, max: 10, stepSize: 2, display: false } },
tooltips: { enabled: false } };
const etichette = ["Velocità", "Forza", "Abilità", "Magia", "Fortuna", "Mana"];
</script>
<!-- RADAR CHART -->
<!-- Aggiunta Utenti -->
<script type="text/javascript">
var mario = {labels: etichette, datasets: [ {label: "Mario", backgroundColor: "rgba(62,135,74,.5)", pointBackgroundColor: "#34b44a", data: [1, 3, 1, 2, 4, 3]}]};
var marco = {labels: etichette, datasets: [ { label: "Marco", backgroundColor: "rgba(255,99,132,0.2)", pointBackgroundColor: "rgba(255,99,132,1)", data: [2, 2, 4, 4, 3, 8], }] };
var franco = {labels: etichette, datasets: [ {label: "Franco", backgroundColor: "rgba(255,255,0,0.2)", pointBackgroundColor: "rgba(255,99,132,1)", data: [9, 3, 6, 1, 5, 3], }] };
var antonio = {labels: etichette,datasets: [ {label: "Antonio",backgroundColor: "rgba(100,100,132,0.2)", pointBackgroundColor: "rgba(255,99,132,1)", data: [1, 5, 4, 7, 2, 8],}]};
</script>
Codice HTML che verrà mostrato in FONDO a tutte la Pagine:
HTML <!-- RADAR CHART (seconda Parte) -->
<!-- Special THANKS to Codepen & Alfiere2 -->
<!-- Original Code: https://codepen.io/haxen2000/pen/jBVMqK -->
<!-- Aggiungere qui ulteriori Utenti -->
<!-- ESEMPIO:
var user5 = document.querySelector(".matteo");
var myRadarChart5 = new Chart(user5, { type: 'radar', data: mario, options: options });
ATTENZIONE ! Se si aggiunge un utente si deve aggiungere anche il relativo CANVAS nel Topic apposito. ESEMPIO:
<canvas class="matteo" style="background: #000; padding-bottom: 15px;"></canvas>
-->
<script type="text/javascript">
var user1 = document.querySelector(".mario");
var user2 = document.querySelector(".marco");
var user3 = document.querySelector(".franco");
var user4 = document.querySelector(".antonio");
var myRadarChart1 = new Chart(user1, { type: 'radar', data: mario, options: options });
var myRadarChart2 = new Chart(user2, { type: 'radar', data: marco, options: options });
var myRadarChart3 = new Chart(user3, { type: 'radar', data: franco, options: options });
var myRadarChart4 = new Chart(user4, { type: 'radar', data: antonio, options: options });
</script>
Per avere il grafico nel Topic che desiderate, vi basta inserire questo codice:
CODICE <canvas class="mario" style="background: #000; padding-bottom: 15px;"></canvas>
Ovviamente, cambiando l'utente, dovrete adattare il codice di conseguenza.
Seguite le istruzioni nei Codici HTML.
|
|
.
.
