Question

我想使用数据库中的数据绘制折线图。

http://futurk.com/futurk.com/etkin/pages/veri.php 这个链接告诉我我的数据库中有什么。这是veri.php代码：

<?php

header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'futurk_etkin');
define('DB_PASSWORD', 'etkin');
define('DB_NAME', 'futurk_etkin');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT id,gerilim,akim,guc FROM etkin");

//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);


?>

我还制作了linegraph.html文件，我可以看到我的图表。这是linegraph.html代码：

<!DOCTYPE html>
<html>
    <head>
        <title>ChartJS - LineGraph</title>
        <style>
            .chart-container {
                width: 640px;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="chart-container">
            <canvas id="mycanvas"></canvas>
        </div>

        <!-- javascript -->
        <script type="text/javascript" src="../../dist/js/jquery.min.js"></script>
        <script type="text/javascript" src="../../dist/js/Chart.min.js"></script>
        <script type="text/javascript" src="../../dist/js/linegraph.js"></script>
    </body>
</html>

我添加了一个linegraph.js。这是我的linegraph.js代码：

$(document).ready(function(){
    $.ajax({
        url : "http://futurk.com/futurk.com/etkin/pages/veri.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var id = [];
            var gerilim = [];
            var akim = [];
            var guc = [];

            for(var i in data) {
                id.push("ID " + data[i].id);
                gerilim.push(data[i].gerilim);
                akim.push(data[i].akim);
                guc.push(data[i].guc);
            }

            var chartdata = {
                labels: userid,
                datasets: [
                    {
                        label: "gerilim",
                        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: facebook_follower
                    },
                    {
                        label: "akim",
                        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: twitter_follower
                    },
                    {
                        label: "guc",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(211, 72, 54, 0.75)",
                        borderColor: "rgba(211, 72, 54, 1)",
                        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
                        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
                        data: googleplus_follower
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
        },
        error : function(data) {

        }
    });
});

但是当我点击此链接时，我什么也看不见。我错了吗？

http://futurk.com/futurk.com/etkin/pages/charts/linegraph.html

Answer 1

将类型设为POST并将数据类型添加为json。并将标签设为id而不是userId，我希望它能为你工作。我建议改变代码。

Answer 2

查看您编码的JSON，

{"saat":"0","KayitTarihi":"2016-11-24 00:00:57","Gerilim":"0.2","Akim":"0.01","Guc":"0.001"}

您似乎只有其他人复制粘贴的代码，因为您的JSON没有任何"id"。所以首先要在php文件（linegraph.js代码）中更正你的查询，如下所示：

$(document).ready(function(){
$.ajax({
    url : "http://futurk.com/futurk.com/etkin/pages/veri.php",
    type : "POST",
    datatype: 'json',

    success : function(data){
        console.log(data);

        var saat = [];
        var Gerilim = [];
        var Akim = [];
        var Guc = [];

        for(var i in data) {
            id.push("ID " + data[i].saat);
            Gerilim.push(data[i].Gerilim);
            Akim.push(data[i].Akim);
            Guc.push(data[i].Guc);
        }

        var chartdata = {
            labels: saat,
            datasets: [
                {
                    label: "Gerilim",
                    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: Gerilim
                },
                {
                    label: "Akim",
                    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: Akim
                },
                {
                    label: "Guc",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(211, 72, 54, 0.75)",
                    borderColor: "rgba(211, 72, 54, 1)",
                    pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
                    pointHoverBorderColor: "rgba(211, 72, 54, 1)",
                    data: Guc
                }
            ]
        };

        var ctx = $("#mycanvas");

        var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata
        });
    },
    error : function(data) {

    }
});
});

如何使用MySQL表和PHP

2 个答案: