使用localhost连接时,无法在其他设备上显示图形

时间:2016-11-15 08:11:20

标签: javascript jquery

当我的B笔记本电脑通过xampp连接到A笔记本电脑时,我可以看到所有数据,但我唯一看不到的是图形。页面将显示,但只缺少图表。为什么会那样? 我使用的js是Chart.min.jsjquery-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);

这是我从自己的笔记本电脑中看到的

enter image description here

0 个答案:

没有答案