Question

我以前使用ChartJS（通过引用在线示例）成功绘制了一个简单的折线图，并从MySQL DB中提取了所需的数据。之前在图表中只有一行，因为我只从表中提取了一个字段（写入速度）。

现在我已更新它以从数据库中提取三个字段（test_id，write_speed，read_speed）并在图表中显示两个线图。但现在它不起作用。

对JavaScript很陌生，我无法理解我哪里出错了。任何帮助将不胜感激。

以下是从数据库中提取数据的代码：

<?php
/**
 * filename: data.php
 */

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

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'simpletest');

//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 = "SELECT test_id, read_speed, write_speed FROM log2 ORDER BY test_id ASC";

//execute query
$result = $mysqli->query($query);

// All good?
if ( !$result ) {
  // Nope
  $message  = 'Invalid query: ' . $link->error . "n";
  $message .= 'Whole query: ' . $query;
  die( $message );
}

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

以下是脚本中调用的HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Tesults New</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="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/Chart.min.js"></script>
        <script type="text/javascript" src="js/linegraph.js"></script>
    </body>
</html>

以下是图表脚本：

$(document).ready(function() {

    /**
     * call the data.php file to fetch the result from db table.
     */
    $.ajax({
        url : "http://localhost/test/chartjs2/api/data.php",
        type : "GET",
        success : function(data)
        {
            console.log(data);

            var testid = [];
            var readspeed = [];
            var writespeed = [];

            for (var i in data) 
            {
                testid.push("TestID " + data[i].test_id);
                readspeed.push(data[i].read_speed);
                writespeed.push(data[i].write_speed);
            }

            //get canvas

            var chartdata = {
                labels : testid,
                datasets : [
                    {
                        label : "Read Speed in Gbps",
                        data : readspeed,
                        backgroundColor : "blue",
                        borderColor : "lightblue",
                        fill : false,
                        lineTension : 0,
                        pointRadius : 5
                    }

                    {
                        label : "Write Speed in Mbps",
                        data : writespeed,
                        backgroundColor : "blue",
                        borderColor : "darkblue",
                        fill : false,
                        lineTension : 0,
                        pointRadius : 5
                    }
                ]
            };

            var options = {
                title : {
                    display : true,
                    position : "top",
                    text : "New Test Results",
                    fontSize : 18,
                    fontColor : "#111"
                },
                legend : {
                    display : true,
                    position : "bottom"
                }
            };

            if (chart) {
                chart.destroy();
            }

            //var ctx = document.getElementById('myChart').getContext('2d');
            var ctx = $("#mycanvas");
            var chart = new Chart( ctx, {
                type : "line",
                data : chartdata,
                options : options
            } );

        },
        error : function(data) {
            console.log(data);
        }
    });

});

我可能犯了一个非常愚蠢的错误，可能会完全逃避我，所以请指出是否真的做了些傻事。

谢谢。

Answer 1

这里有语法错误：

    {
        label : "Write Speed in Mbps",

应该是（添加逗号）：

    ,{
        label : "Write Speed in Mbps",

请检查您的控制台输出，并使用vscode或atom编辑您的JavaScript代码，因为编辑器也会告诉您有关语法错误的信息。

确保使用最近版本的chart.js（2.7.0捆绑或依赖）。

我无法使用固定数据重现错误，因此它是代码中的语法错误，php发送的错误json或错误版本的chart.js

var testid = [1,2,3,4,5];
var readspeed = [6,7,8,9,10];
var writespeed = [4,5,6,7,8];

var chartdata = {
    labels : testid,
    datasets : [
        {
            label : "Read Speed in Gbps",
            data : readspeed,
            backgroundColor : "blue",
            borderColor : "lightblue",
            fill : false,
            lineTension : 0,
            pointRadius : 5
        }

        ,{
            label : "Write Speed in Mbps",
            data : writespeed,
            backgroundColor : "blue",
            borderColor : "darkblue",
            fill : false,
            lineTension : 0,
            pointRadius : 5
        }
    ]
};

var options = {
    title : {
        display : true,
        position : "top",
        text : "New Test Results",
        fontSize : 18,
        fontColor : "#111"
    },
    legend : {
        display : true,
        position : "bottom"
    }
};

if (chart) {
    chart.destroy();
}
var ctx = $('#mycanvas');
var chart = new Chart( ctx, {
    type : "line",
    data : chartdata,
    options : options
});

    <canvas id="mycanvas" width="400" height="400"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>

无法使用ChartJS绘制图表

1 个答案: