早上好，有点啰嗦，所以我会尽量保持简短。
我正在尝试使用HTML来调用连续的PHP主题，而不是在每个HTML（php）页面中编写代码。
例如，home.php看起来像这样：
<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("includes/head-tag.php");?>
</head>
<body id="page-top">
<?php include("includes/nav.php");?>
<div id="wrapper">
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li>
<li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
<li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
<li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
<li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
<li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<?php include("includes/breadcrumb.php");?>
<!-- Card Deck -->
<?php include("cards.php");?>
<!-- DataTables Example -->
<?php include("charts.php");?>
</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<?php include("includes/footer.php");?>
</div>
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal -->
<?php include("includes/logout.php");?>
<!-- Scripts -->
<?php include("includes/scripts.php");?>
</body>
</html>你会看到中途下来，我有chart.php，它只是HTML to chart.js（bootstrap主题），如下所示：
<div class="card mb-4 border-0">
<div class="card-deck">
<div class="card">
<div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
<div class="card-body">
<canvas id="doughnutChart"></canvas>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
<div class="card-body">
<canvas id="doughnutChartPho"></canvas>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
<div class="card-body">
<canvas id="doughnutChartLap"></canvas>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div> 在根中直接（其中charts.php是）我有一个js / charts / pie.js的文件夹，其中包含：
//doughnut
var ctxD = document.getElementById("doughnutChart").getContext('2d');
var myLineChart = new Chart(ctxD, {
type: 'doughnut',
data: {
labels: <?php echo json_encode($json); ?>,
datasets: [{
data: <?php echo json_encode($json2); ?>,
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
}]
},
options: {
responsive: true
}
});我放在charts.php顶部的php代码是这样的：
$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute();
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
$json[]= $type;
$json2[]= (int)$manufacturer;
}
echo json_encode($json);
echo json_encode($json2);
?> 这两个回声出现在页面主页的正确位置（即，在第一个图表的正上方），但图表没有显示。我怀疑这是因为文件位于不同的位置，而不是在一个代码块中。
我可以将php查询添加到pie.js的顶部吗？如果我在数据集和标签中使用假装数据，则会显示图表。
ChartJS期望以逗号分隔的语句中的数据，例如：
data: 5, 7, 8, 9;
我怀疑json_encode令人困惑，并建议你返回字符串，而不是数组：
$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute();
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
$json .= "'".$type."',";
$json2 .= (int)$manufacturer.",";
}
echo $json; // should be 'Red','Green','Blue' ...
echo $json2; // should be 5,6,9,4 ... etc
?>