个人中心
gpt4 book ai didi

javascript - 如何使用 MySQL 表和 PHP 中的数据绘制折线图

转载 作者：行者123 更新时间：2023-11-30 22:10:08 26 4
gpt4 key购买 nike

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

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

最佳答案

将类型设置为 POST，并将数据类型添加为 json。并将标签设为 id 而不是 userId，希望它对您有用。我建议更改代码。

查看编码后的 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) {

    }
});
});

关于javascript - 如何使用 MySQL 表和 PHP 中的数据绘制折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40344992/

26 4 0
文章推荐： python - 性能比较 静态类型 Python 3.6+ 与 Cython
文章推荐： c# - xna 只绘制一次 spritebatch
文章推荐： c# - 固定大小的字符串获取/设置
文章推荐： MySQL - 连接三个表并显示数据(即使没有找到匹配项)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com