当我的B笔记本电脑通过xampp连接到A笔记本电脑时,我可以看到所有数据,但我唯一看不到的是图形。页面将显示,但只缺少图表。为什么会那样?
我使用的js是Chart.min.js
和jquery-3.1.1.min.js
//This is my js
$(document).ready(function(){
$.ajax({
url : "http://localhost/HerbalifePortal/data2.php",
type : "GET",
success : function(data){
console.log(data);
var feedback_date = [];
var weight = [];
var height = [];
var bmi = [];
var visceral = [];
var water = [];
var body_fat = [];
for(var i in data) {
feedback_date.push("Date " + data[i].feedback_date);
weight.push(data[i].weight);
height.push(data[i].height);
bmi.push(data[i].bmi);
visceral.push(data[i].visceral);
water.push(data[i].water);
body_fat.push(data[i].body_fat);
}
var chartdata = {
labels: feedback_date,
datasets: [
{
label: "Weight(KG)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: weight
},
{
label: "Height(cm)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: height
},
{
label: "BMI",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 289, 152, 0.75)",
borderColor: "rgba(29, 289, 152, 1)",
pointHoverBackgroundColor: "rgba(29, 289, 152, 1)",
pointHoverBorderColor: "rgba(29, 289, 152, 1)",
data: bmi
},
{
label: "Visceral fat level (%)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(15, 300, 50, 0.75)",
borderColor: "rgba(15, 300, 50, 1)",
pointHoverBackgroundColor: "rgba(15, 300, 50, 1)",
pointHoverBorderColor: "rgba(15, 300, 50, 1)",
data: visceral
},
{
label: "Body water percentage (%)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(150, 100, 100, 0.75)",
borderColor: "rgba(150, 100, 100, 1)",
pointHoverBackgroundColor: "rgba(150, 100, 100, 1)",
pointHoverBorderColor: "rgba(150, 100, 100, 1)",
data: water
},
{
label: "Body fat (%)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(200, 50, 0, 0.75)",
borderColor: "rgba(200, 50, 0, 1)",
pointHoverBackgroundColor: "rgba(200, 0, 50, 1)",
pointHoverBorderColor: "rgba(200, 50, 0, 1)",
data: body_fat
},
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
//This is where the graph will display
<?php
session_name ('YourVisitID');
session_start();
include ('./header3.html');
?>
<section id="main" class="wrapper">
<div class="container">
<link rel="stylesheet" href="css/bootstrap.css" />
<?php
echo "<h1>{$_SESSION['last_name']} Feedback Information</h1>
<p><br /><br /></p>";
echo'<p><br><a href="customer_feedback.php" class="button special small">Change to table</a></br></p>';
?>
<div class="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/linegraph.js"></script>
</div>
</section>
<?php
include ('./footer.html');
?>
//This is the place where i get the data and put in the js
<?php
session_name ('YourVisitID');
session_start();
//setting header to json
header('Content-Type: application/json');
$last_name = $_SESSION['last_name'];
//database
define('DB_HOST', 'localhost');
define('DB_FEEDBACK', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'herbalife');
//get connection
$mysqli = new mysqli(DB_HOST, DB_FEEDBACK, DB_PASSWORD, DB_NAME);
if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}
//query to get data from the table
$query = "SELECT weight, height, water, visceral, body_fat, bmi, feedback_date, feedback_id
FROM feedback, coach, customer
WHERE feedback.customer_id = customer.customer_id AND customer.coach_id = coach.coach_id AND coach.coach_id = {$_SESSION['coach_id']} AND customer.customer_lastname = '$last_name'
ORDER BY feedback_date";
//execute query
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$mysqli->close();
//now print the data
print json_encode($data);
这是我从自己的笔记本电脑中看到的