如何从 mysql 数据库为雷达图表创建下拉列表？答案

【问题标题】：How I create a dropdown for radar chartjs from mysql database?如何从 mysql 数据库为雷达图表创建下拉列表？
【发布时间】：2019-12-04 10:28:41
【问题描述】：

我有一个名为 player 的 mysql 数据库，其中包含 id、名称、攻击、防守、速度、运球和射门这些列。

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

我的代码是这样的：

<!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);
?>

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

【问题讨论】：

标签： mysql chart.js dropdown

【解决方案1】：

试试这个代码：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));
?>

【讨论】：

感谢您的回答，但我的问题是另一个问题：如何将下拉列表与雷达图联系起来？