javascript - ChartJS圆环图未显示
问题描述
我正在尝试在 .php 文件中显示一个简单的 ChartJS 圆环图，正在显示 HTML 卡，但不显示图表。在本地 .html 文件中使用相同的代码时，.php 文件的页眉存储在单独的文件中，我不确定这是否是它不起作用的原因
环形图的 HTML：
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">Donut Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>
Javascript：
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//-------------
//- DONUT CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData = {
labels: [
'Chrome',
'IE',
'FireFox',
'Safari',
'Opera',
'Navigator'
],
datasets: [
{
data: [700, 500, 400, 600, 300, 100],
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
}
]
}
var donutOptions = {
maintainAspectRatio: false,
responsive: true
}
//Create pie or doughnut chart
// You can switch between pie and doughnut using the method below.
new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
</script>
</body>
</html>
文件的所有代码：
<?php
session_start();
if ($_SESSION['email'] == "") {
header("location:login.php");
}
include_once 'header.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Dashboard</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>New Complaints</p>
</div>
<div class="icon">
<i class="fas fa-plus-square"></i>
</div>
<a href="#" class="small-box-footer">Check them out <i class="fas fa-chevron-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>53<sup style="font-size: 20px"></sup></h3>
<p>Solved Complaints</p>
</div>
<div class="icon">
<i class="fas fa-check-square"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-chevron-right"></i></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-danger">
<div class="inner">
<h3>44</h3>
<p>Unsolved Complaints</p>
</div>
<div class="icon">
<i class="fas fa-times"></i>
</div>
<a href="#" class="small-box-footer">Solve now <i class="fas fa-chevron-right"></i></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>65</h3>
<p>Total Users</p>
</div>
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-chevron-right"></i></a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- DONUT CHART -->
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">Donut Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</section>
<!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
</div>
<!-- ./col -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//-------------
//- DONUT CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData = {
labels: [
'Chrome',
'IE',
'FireFox',
'Safari',
'Opera',
'Navigator'
],
datasets: [
{
data: [700, 500, 400, 600, 300, 100],
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
}
]
}
var donutOptions = {
maintainAspectRatio: false,
responsive: true
}
//Create pie or doughnut chart
// You can switch between pie and doughnut using the method below.
new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
</script>
</body>
</html>
<?php
include_once 'footer.php';
?>
解决方案
推荐阅读
- azure - 当 Azure APP 服务位于 NGINX 等反向代理后面时，如何更改 MSAL 回复 URL？
- shell - 我正在尝试在目录中查找文件，但 shell 代码片段未检测到它
- python - 'dict' 对象在 add_coupon 中没有属性 'coupon' ecommerce/store/views.py，第 254 行
- amazon-web-services - 如何从 Cloud Formation 迁移到 Terraform？
- reactjs - 当数据来自 redux 存储时，useState() 在刷新时丢失状态（数据）
- bash - 监控日志文件尾部是否有字符串，如果没有找到，退出
- json - 如何从配置单元 SQL 表描述生成 json 对象？
- javascript - 每个项目的更新计数（附加片段）
- maven - 在执行 pom.xml 作为 maven 测试时没有测试运行，但在执行 testng.xml 时它工作正常
- macos - 如何扩大这些选取器控件并将它们对齐在右侧？