今天，我们将用 JavaScript 创建一个游戏分析仪表盘。
本文旨在快速介绍，因此最好具有 JavaScript、HTML 和 CSS 方面的经验。
但为什么我们需要游戏分析仪表盘
要用数据赋能您的服务，首先需要分析玩家行为和游戏数据。这样，您就可以改进游戏玩法、增强游戏机制，甚至全面升级您的游戏。
你还可以追踪玩家数量，削弱你的阿卡丽直到她成为小兵等等。事实上，游戏数据可以做很多事情。
为了有效地分析这些游戏数据，首先需要将其收集并存储在某个地方，以便更快地进行分析。因此，游戏分析仪表盘正是为此而生的。
示例数据
但是，对于这个项目，我们不会有一个已经构建的游戏来提供数据或数据管道来向我们的仪表板提供信息。
相反，我们将创建 JSON 格式的示例数据以在我们的仪表板中使用。
我们可以编写一个包含 44 个（我喜欢数字 4）玩家会话的数组，其中将包含一个 ID（类似于您的 Hoyoverse ID）、一个分数以及每个玩家在游戏中会话的持续时间。
function generatePlayerData(id) {
return {
id: id,
score: Math.floor(Math.random() * 1000),
duration: (Math.floor(Math.random() * 86400) / 3600).toFixed(2)
};
}
const playerSessions = [];
for (let i = 1; i <= 44; i++) {
playerSessions.push(generatePlayerData(`Player ${i}`));
}
console.log(playerSessions); [
{ Id: 'Player 1', Score: 592, Duration: '3.67' },
{ Id: 'Player 2', Score: 879, Duration: '16.45' },
{ Id: 'Player 3', Score: 116, Duration: '8.59' },
{ Id: 'Player 4', Score: 736, Duration: '0.47' },
{ Id: 'Player 5', Score: 301, Duration: '6.03' },
{ Id: 'Player 6', Score: 116, Duration: '12.01' },
{ Id: 'Player 7', Score: 371, Duration: '9.96' },
{ Id: 'Player 8', Score: 466, Duration: '15.23' },
{ Id: 'Player 9', Score: 186, Duration: '21.66' },
{ Id: 'Player 10', Score: 279, Duration: '2.05' },
]处理数据
让我们把数据变得重要起来，向其他人展示。由于手头数据不多，我们可以决定一些基本流程：平均游戏时长、玩家平均得分，以及按得分确定前十名玩家。
const totalDuration = playerSessions.reduce((sum, session) => sum + parseFloat(session.duration), 0);
const avgDuration = (totalDuration / playerSessions.length).toFixed(2);
const totalScore = playerSessions.reduce((sum, session) => sum + session.score, 0);
const avgScore = (totalScore / playerSessions.length).toFixed(2);
const topPlayers = playerSessions
.slice()
.sort((a, b) => b.score - a.score)
.slice(0, 10);// For stats overview box
document.getElementById('stats').innerHTML = `
<h2>Stats Overview</h2>
<p><strong>Average Duration:</strong> ${avgDuration} hours</p>
<p><strong>Average Score:</strong> ${avgScore}</p>
`;最后，我们有了可以展示给管理层的重要数据。让我们从一些酷炫的图表和排行榜开始。
在浏览器中可视化数据
让我们从简单的开始，不做任何定制，只使用纯粹的图表和表格。本文中的图表我们将使用 Chart.js。
const ctx = document.getElementById('scoreChart').getContext('2d');
// Make a bar chart for player scores
const scoreChart = new Chart(ctx, {
type: 'bar',
data: {
// labels for x-axis = all player IDs
labels: playerSessions.map(s => s.id),
datasets: [{
label: 'Scores',
data: playerSessions.map(s => s.score),
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: { y: { beginAtZero: true } } // y-axis always starts at zero (makes sense for scores)
}
});
const leaderboardDiv = document.getElementById('leaderboard');
leaderboardDiv.innerHTML = '<h2>Leaderboard</h2>';
// Show top players in leaderboard div
topPlayers.forEach((player, i) => {
leaderboardDiv.innerHTML += `<p>${i + 1}. ${player.id} - Score: ${player.score}</p>`;
});
// Stats box update
document.getElementById('stats').innerHTML = `
<h2>Stats Overview</h2>
<p><strong>Average Duration:</strong> ${avgDuration} hours</p>
<p><strong>Average Score:</strong> ${avgScore}</p>
`;
现在我们已经介绍了基础知识，让我们继续讨论 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Player Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard-container">
<header><h1>Game Analytics Dashboard</h1></header>
<div id="stats" class="card"></div>
<div class="main-content">
<canvas id="scoreChart"></canvas>
<div id="leaderboard" class="card leaderboard"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>现在你应该看到类似这样的内容：
简单的仪表板
尚未定制，只是纯白房间中的原始数据。让我们用对比、优雅和一丝火焰赋予它生命。
接下来，我们将添加一个 style.css 文件并确保它在我们的 HTML 中正确链接。
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #ffffff;
color: #111111;
}
header {
text-align: center;
padding: 1.5rem 0;
color: #000000;
font-size: 2rem;
font-weight: bold;
letter-spacing: 1px;
}
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.main-content {
display: flex;
gap: 3rem;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin-top: 1rem;
}
canvas {
flex: 2;
max-width: 700px;
background-color: #fafafa;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.card {
background-color: #fff;
padding: 2rem;
border-radius: 12px;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.leaderboard {
flex: 1;
min-width: 280px;
}
.leaderboard-entry {
display: flex;
justify-content: space-between;
padding: 0.6rem 0;
border-bottom: 1px solid #eee;
}
.rank {
font-weight: bold;
color: #ff2a2a;
}
.player-name {
flex: 1;
margin-left: 1rem;
color: #111111;
}
.player-score {
font-weight: bold;
color: #111111;
}
h2 {
color: #000000;
border-bottom: 2px solid #ff2a2a;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Player Dashboard</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard-container">
<header><h1>Game Analytics Dashboard</h1></header>
<div id="stats" class="card"></div>
<div class="main-content">
<canvas id="scoreChart"></canvas>
<div id="leaderboard" class="card leaderboard"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>管理员的最终仪表板
现在我们有了一个真正可以称为仪表板的仪表板。
使用 Chart.js 生成实时图表非常简单，如果您已经了解 JavaScript、HTML 和 CSS，则不需要任何额外的技能。
结论
仪表板很酷，它们在一个地方显示您需要的所有内容，并且您的数据值得用漂亮的仪表板来呈现。
使用仪表板可以更轻松地呈现数据，并且借助 JavaScript Chart.js 库，您可以在呈现时进行实时更新。
您可以轻松自定义仪表板样式，并使用简单的 JSON 格式更新数据。此外，您还可以轻松创建自己的仪表板。
本文旨在帮助您入门，仅此而已。完整代码地址。
本文为译文，英文原文地址（可能需要使用魔法访问或付费会员才可观看）：
https://ryuru.com/building-game-analytics-dashboard-with-javascript/