MediaWiki:Gadget-statChart.js
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
$(function() {
var $statchart = $('#stat-radar-container');
if(!$statchart.length) {
return;
}
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js")
).then(function () {
const d = document.getElementById('stat-radar-container');
var canvas = document.createElement('canvas');
canvas.classList.add('stat-radar');
d.append(canvas);
var e = [d.dataset.basic_attack, d.dataset.mobility, d.dataset.ability_power, d.dataset.durability];
const labels = ["Basic Attack", "Mobility", "Ability Power", "Durability"];
const data = e;
const ctx = canvas.getContext("2d");
const gradient = ctx.createRadialGradient(180, 180, 1, 180, 180, 300);
gradient.addColorStop(0, "rgba(200, 160, 69, 0.65)");
gradient.addColorStop(.5, "rgba(200, 160, 69, 0.85)");
gradient.addColorStop(.9, "rgba(200, 160, 69, 0.85)");
const myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: labels,
datasets: [{
borderColor: "#eca508",
backgroundColor: gradient,
tension: 0,
pointBackgroundColor: 'transparent',
pointBorderColor: 'transparent',
data: data
}],
},
options: {
maintainAspectRatio: !1,
responsive: !0,
plugins: {
legend: false
},
scales: {
r: {
beginAtZero: !1,
max: 10,
min: 0,
ticks: {
display: !1,
stepSize: 2
},
grid: {
color: "rgba(160, 160, 160, 1)"
},
angleLines: {
color: "rgba(160, 160, 160, 1)"
}
}
}
}
});
});
});