gpt4 book ai didi

mysql - 如何从 mysql 数据库创建雷达 Chartjs 的下拉列表?

转载 作者:行者123 更新时间:2023-11-29 15:23:58 24 4
gpt4 key购买 nike

我有一个名为“players”的 mysql 数据库,其中包含 id、name、attack、defence、speed、dribbling 和 shot 等列。

我创建了一个雷达图来显示玩家数据。

我的代码是这样的:

<!DOCTYPE html>
<html>
<head>

<style>

</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
<script type="text/javascript">

let json = <?php include("datas.php");?>;
let label = [];
let data = [];

// generate label and data dynamically
json.forEach(e => {
label.push(e.name);
data.push([+e.attack, +e.defence, +e.speed, +e.shoot, +e.dribbling]);
});

let ctx = document.querySelector('#canvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['attack', 'defence', 'speed','shoot','dribbling'],
datasets: [{
label: label[0],
data: data[0],
backgroundColor: 'rgba(0,119,204,0.2)',
borderColor: 'rgba(0,119,204, 0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
}, {
label: label[1],
data: data[1],
backgroundColor: 'rgba(255, 0, 0 ,0.15)',
borderColor: 'rgba(255, 0, 0 ,0.45)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
}, {
label: label[2],
data: data[2],
backgroundColor: 'rgba(0,119,204,0.2)',
borderColor: 'rgba(255, 0, 0 ,0.45)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
}]
},
options: {
title: {
display: true,
position: "top",
text: "Radar test",
fontSize: 14,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom"
},
scale: {
pointLabels: {
fontSize: 11
}
}
}
});
</script>


</body>
</html>

数据.php:

<?php
$conn = mysqli_connect("localhost","root","","players");
$sqlQuery = "SELECT * FROM players_attributes ORDER BY id";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
echo json_encode($data);
?>

我的问题是如何创建带有按名称下拉过滤器的雷达图?下拉列表应显示玩家列表以及所选玩家的雷达图变化。

radar chart

最佳答案

试试这个代码:Datas.php

<?php
$conn = mysqli_connect("localhost","root","","players");
$sqlQuery = "SELECT id, name FROM players_attributes ORDER BY id";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
echo "<option data-id='".$row['id']."' value='" . $row['name'] ."'>";
}
echo json_encode(array('data'=>$row));
?>

关于mysql - 如何从 mysql 数据库创建雷达 Chartjs 的下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59173856/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com