簡體   English   中英

Json到Chart.js不起作用

[英]Json to Chart.js not working

我們從Internet上獲得了此文件,並且可以通過某種方式在console中將輸出獲取為JSON ,但是chartdisplay.js並未采用JSON文件。

你能幫助我嗎。
謝謝!

的HTML

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/chartjs/chart.js"></script>
<script type="text/javascript" src="chartdisplay.js"></script>

<div class="chart-container"> <!-- we have defined width and height for this class -->
    <canvas id="mycanvas"></canvas>
</div>

content.php

<?php
//get connection
$mysqli = new mysqli('localhost','root','','beehive_exp');

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

$query = sprintf("SELECT userid, facebook, twitter, googleplus FROM followers");

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

chartdisplay.js

$(document).ready(function(){
    $.ajax({
        url : "http://192.100.1.100/content.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var userid = [];
            var facebook_follower = [];
            var twitter_follower = [];
            var googleplus_follower = [];

            for(var i in data) {
                userid.push("UserID " + data[i].userid);
                facebook_follower.push(data[i].facebook);
                twitter_follower.push(data[i].twitter);
                googleplus_follower.push(data[i].googleplus);
            }

            var chartdata = {
                labels: userid,
                datasets: [
                    {
                        label: "facebook",
                        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: "twitter",
                        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: "googleplus",
                        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) {
            }
        });
    });

這就是我們得到的

在此處輸入圖片說明

JSON輸出

在此處輸入圖片說明

PHP輸出

在此處輸入圖片說明

我們繼續進行聊天,發現的問題是他從php文件獲取的數據為JSON字符串。

因此,在成功功能的第一行中,我寫道

data = JSON.parse(data);

之后,相同的代碼工作並顯示了預期的圖形。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM