项目场景：
提示：这里简述项目相关背景：
项目场景：网页添加两张饼状图，并为饼状图添加点击事件，在点事件中可以进一步筛选内容并显示在当前页面。
问题描述
页面中的两个饼状图点击后显示出各自对应的内容，但是点击内容里的选项后，两个不同的饼状图的内容会相互产生影响，第一个饼状图的内容会显示在第二个饼状图的下方，或者第二个显示在第一个的下方，
<?php
// 配置数据库信息等参数，进行连接
$servername = "localhost";
$username = "king";
$password = "a1234567.";
$dbname = "people";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 查询用户在位状态数据
$sql = "SELECT major, COUNT(*) as count FROM ofctalent_pool GROUP BY major";
$result = $conn->query($sql);
// 将查询结果转换为数组
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
array_push($data, array("status" => $row["major"], "count" => $row["count"]));
}
}
// 将数组转换为 JSON 数据
$json_data = json_encode($data);
// 关闭数据库连接
$conn->close();
?>
// 使用 jQuery 的 ready() 方法，在页面加载完成后执行以下代码
$(document).ready(function(){
// 获取饼状图的容器元素
const ctx = document.getElementById('pieChart').getContext('2d');
// 解析从 PHP 中获取到的 JSON 数据
const data = JSON.parse('<?php echo $json_data; ?>');
// 配置选项
var options = {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
var label = context.label || '';
var value = context.parsed || 0;
var total = context.dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var percent = total > 0 ? ((value / total) * 100).toFixed(2) + '%' : '';
return label + ': ' + value + ' (' + percent + ')';
}
}
},
datalabels: {
color: '#fff',
formatter: function(value, ctx) {
var sum = 0;
var dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(function(data) {
sum += data;
});
var percentage = (value*100 / sum).toFixed(2)+"%";
return percentage;
},
font: {
size: '14'
}
}
}
};
// 创建饼状图
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: data.map(function(item){ return item.status; }),
datasets: [{
data: data.map(function(item){ return item.count; }),
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(127, 122, 192)',
'rgb(100, 190, 20)',
'rgb(20, 70, 201)',
'rgb(220, 18, 201)',
'rgb(120, 29, 100)',
'rgb(20, 255, 19)'
]
}]
},
options: options
});
// 为饼状图添加点击事件
$("#pieChart").click(function(evt){
var activePoints = myPieChart.getElementsAtEvent(evt);
if(activePoints.length > 0){
// 获取点击的区域索引
var clickedIndex = activePoints[0]._index;
// 获取该区域对应的状态
var clickedStatus = data[clickedIndex].status;
// 发送 Ajax 请求获取该状态下的用户信息
$.ajax({
url: "get_officer_info.php",
type: "POST",
data: {status: clickedStatus},
success: function(response){
// 将获取到的用户信息显示在页面上
$("#userInfo").html(response);
}
});
}
});
});
</script>
<div id="userInfo"></div>
目标页面
原因分析：
原因是显示内容没有使用HTML形式显示，出现的问题是当先点击一个图时再区点击另一图然后点击进一步筛选的三个按钮时，会在第一个图上显示内容
解决方案：
在目标页面代码中修改代码，将查询的内容转化为HTML代码，就可以避免两个图的内容相互显示在对方饼状图下方，目标页面完整代码如下
<?php
// 配置数据库信息等参数，进行连接
$servername = "localhost";
$username = "king";
$password = "a1234567.";
$dbname = "people";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 获取 POST 提交的 status 参数
$major = $_POST["status"];
$talent_level = isset($_POST['talent_level']) ? $_POST['talent_level'] : "";
// 查询对应状态下的用户信息
$sql = "SELECT * FROM ofctalent_pool WHERE major = '$major'";
if ($talent_level != "") {
$sql .= " AND talent_level = '$talent_level'";
}
$result = $conn->query($sql);
// 将查询结果转换为 HTML 代码并输出到页面上
$table_html = "";
if ($result->num_rows > 0) {
$table_html .= "<div id='table-container' style='margin: 1em;'>
<button type='button' onclick='getData(\"骨干人才\")'>骨干人才</button>
<button type='button' onclick='getData(\"尖子人才\")'>尖子人才</button>
<button type='button' onclick='getData(\"专家人才\")'>专家人才</button>
</div>";
$table_html .= "<table id='talent-table' style='background-color: yellow; margin:1em auto;border:2px solid black;text-align: center;'><tr><th style='width: 4em;border:1px solid black;text-align:center;'>姓名</th><th style='width: 6em;border:1px solid black;text-align:center;'>部职别</th><th style='width: 5em;border:1px solid black;text-align:center;'>人才层次</th><th style='width: 4em;border:1px solid black;text-align:center;'>衔级</th><th style='width: 5em;border:1px solid black;text-align:center;'>职务层级</th><th style='width: 6em;border:1px solid black;text-align:center;'>专业</th><th style='width: 6em;border:1px solid black;text-align:center;'>获得奖项</th><th style='width: 7em;border:1px solid black;text-align:center;'>参与重大项目</th><th style='width: 7em;border:1px solid black;text-align:center;'>符合入池标准条件</th></tr>";
while ($row = $result->fetch_assoc()) {
$table_html .= "<tr><td style='border:1px solid black;'>".$row["officer_name"]."</td>
<td style='border:1px solid black;'>".$row["department"]."</td>
<td style='border:1px solid black;'>".$row["talent_level"]."</td>
<td style='border:1px solid black;'>".$row["rank_"]."</td>
<td style='border:1px solid black;'>".$row["job_hierarchy"]."</td>
<td style='border:1px solid black;'>".$row["major"]."</td>
<td style='border:1px solid black;height:50px;' title='".$row["award"]."'><div style='max-height: 80px;overflow: hidden;'>".$row["award"]."</div></td>
<td style='border:1px solid black;height:80px;' title='".$row["pmajor_task"]."'><div style='max-height: 50px;overflow: hidden;'>".$row["pmajor_task"]."</div></td>
<td style='border:1px solid black;height:80px;' title='".$row["standard"]."'><div style='max-height: 50px;overflow: hidden;'>".$row["standard"]."</div></td>
</tr>";
}
$table_html .= "</table>";
} else {
$table_html = "没有找到相关的人员信息。";
}
// 关闭数据库连接
$conn->close();
// 输出 HTML 代码和 JavaScript 代码
echo <<<HTML
<div id="table-container">$table_html</div>
<script>
function getData(talent_level) {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("table-container").innerHTML = this.responseText;
}
};
xhttp.open("POST", "{$_SERVER['PHP_SELF']}", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("status={$_POST['status']}&talent_level=" + talent_level);
}
</script>
HTML;
?>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
