chart.js 未与在线数据库和 php 链接答案

【问题标题】：chart.js not getting linked with online database and phpchart.js 未与在线数据库和 php 链接
【发布时间】：2018-03-26 08:39:58
【问题描述】：

我想在网页中以双条形图的形式显示我的数据库中的数据。为此，我在 c-panel 服务器上的数据库中创建了表，并编写了一个链接它的 php 脚本，它工作正常。但是当我将它与我的 chart.js 脚本链接时，它没有显示任何结果。 bargraph.html

<!DOCTYPE html>
<html>
<head>
    <title>ChartJS - BarGraph</title>
    <style type="text/css">
        #chart-container {
            width: 640px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="chart-container">
        <canvas id="mycanvas"></canvas>
    </div>

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

app.js

$(document).ready(function(){
$.ajax({
    url: "http://studyleagueit.com/prashant/data.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var player = [];
        var score = [];
        var score1 = [];

        for(var i in data) {
            player.push("Player " + data[i].playerid);
            score.push(data[i].score);
            score1.push(data[i].score1);

            }

            var densitydata = {
                label: 'Player Score',
                backgroundColor: 'rgba(200, 200, 200, 0.75)',
                borderColor: 'rgba(200, 200, 200, 0.75)',
                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                data: score
            }

            var gravitydata = {
                label: 'Player Score',
                backgroundColor: 'rgba(200, 200, 200, 0.75)',
                borderColor: 'rgba(200, 200, 200, 0.75)',
                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                data: score1
            }

            var chartdata = {
                labels: player,
                datasets : [densitydata, gravitydata]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});

【问题讨论】：

标签： javascript php html mysql chart.js

【解决方案1】：

两种可能的解决方案：

您的库似乎没有正确加载。尝试通过 CDN 拉动它们，看看是否可行。我试过运行这个小提琴：

http://jsfiddle.net/25oqkhz7/11/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

但由于 CORS，我无法获取数据。

这也可能是您的问题，如果您的本地域不允许在您的 AJAX 请求中访问来自该 URL 的数据，那么您对该 URL 无能为力。您可以手动下载数据并从某个本地文件中引用它，但在您的开发域被列入白名单之前，您无法执行此类 GET 请求。

你的 console.log() 有什么要说的？也许有更多的输入，我们可以更精确。

【讨论】：

当我在本地服务器上运行我的数据库时，它工作正常，所以我不认为这是图书馆的问题。我是 js 中的新手，所以不知道将 console.log() 放在哪里，你能更具体吗？谢谢
您已经在代码中记录了一些数据。打开开发人员工具（Chrome：CTRL + SHIFT + i 或 F12）并检查控制台选项卡下的内容。当然，只有在您尝试运行 bargraph.html 时才这样做
它说“无法加载studyleagueit.com/prashant/data.php：请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问源'localhost'。”
好的，这就是我在第二个点下提到的内容。您的 localhost 域不允许从 AJAX 请求访问该链接。如果您想了解更多信息，请阅读 CORS 您可以从 studyleagueit.com/prashant/data.php 复制数据并将其保存在本地的 json 文件中，然后您可以在 AJAX 请求中引用该文件。看看怎么做here
有没有办法通过服务器在线进行？