我正在使用yii2 basic。我已经集成了Admin LTE
现在我也使用Chart js通过数据库数据显示统计数据。
我有data.php存储包含数据库数据代码，如下所示：
data.php
<?php
header('Content-Type: application/json');
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "shgreportingdatabase";
// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);
// Check connection
if ($conn->connect_error) {
//die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
$sql = "SELECT employee.FirstName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId";
$result = $conn->query($sql);
if ($result!=null) {
// output data of each row
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
}
$conn->close();
print json_encode($data);
数据输出：
{
[0]=> array(2)
{
["FirstName"]=> string(5) "Silas"
["TotalGroups"]=> string(1) "3"
}
[1]=> array(2)
{
["FirstName"]=> string(4) "Nick"
["TotalGroups"]=> string(1) "4"
}
[2]=> array(2)
{
["FirstName"]=> string(7) "Joshuva"
["TotalGroups"]=> string(1) "2"
}
[3]=> array(2)
{
["FirstName"]=> string(6) "Ashish"
["TotalGroups"]=> string(1) "1"
}
}
我有一个Groupdetails CRUD。在views文件夹中，对于Groupdetails，我创建了包含图表代码的datachart.php，如下所示。
datachart.php
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use app\models\Employee;
use app\models\Groupdetails;
use app\models\Church;
use app\models\Courses;
$this->title = 'Reports';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
#chart-container {
width: 500px;
height: auto;
}
</style>
</head>
<body>
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<!-- Main content -->
<section class="content">
<?php
if(\Yii::$app->user->can('admin'))
{
?>
<!-- Small boxes (Stat box) -->
<canvas id="barChart" width="100" height="50"></canvas>
<!-- javascript -->
<?php
}
?>
</section>
<!-- /.content -->
</div>
<script>
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartexample/data.php",
method: "GET",
dataType: "json",
success: function(data) {
console.log(data);
var emp = [];
var groups = [];
for(var i in data) {
emp.push(" " +data[i].FirstName);
groups.push(data[i].TotalGroups);
}
var chartdata = {
labels: emp,
datasets : [
{
label: 'SHG Groups',
backgroundColor: 'rgba(200, 200, 200, 200)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: groups
}
]
};
var ctx = document.getElementById("barChart");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
</script>
</body>
</html>
现在，当我运行时，不会显示任何图表。如果我检查代码，在控制台中我可以看到通过json传入的数据，但是没有显示图表，并且还显示了foll异常：
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at i (Chart.min.js:10)
at new e (Chart.min.js:10)
at Object.success (index.php?r=groupdetails/datachart:278)
at fire (jquery.js:3187)
at Object.fireWith [as resolveWith] (jquery.js:3317)
at done (jquery.js:8757)
at XMLHttpRequest.<anonymous> (jquery.js:9123)