Question

每当我尝试通过点击按钮通过AJAX更新我的图表时，我都会收到以下错误：

TypeError: this.canvas is null

this.context                = this.canvas.getContext('2d');

RGraph.bar.js (line 49, col 9)

我尝试了各种解决方案，但没有任何对我有用。以下是我在这个过程中使用的两个文件：

的index.php：

<?php
include("includes/db-config.php");

$query = "SELECT * FROM `tb_daily_statistics`";
$rs = mysqli_query($con, $query);

$labels = array();
$data = array();

while($row = mysqli_fetch_array($rs))
{
    $labels[] = $row['day'];
    $data[] = $row['statistics'];
}

// Now you can aggregate all the data into one string
$data_string = "[" . implode(", ", $data) . "]";
$labels_string = "['" . implode("', '", $labels) . "']";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RGraph Charts</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/RGraph/RGraph.common.core.js"></script>
<script type="text/javascript" src="js/RGraph/RGraph.bar.js"></script>
<!--[if lt IE 9]><script src="js/RGraph/excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(document).ready(function (){

    var bar = new RGraph.Bar({
        id: 'mycanvas',
        data: <?php echo $data_string; ?>,
        options: {
            labels: <?php echo $labels_string; ?>,
            gutter: {
                left: 50
            }
        }
    }).draw()

    $("#btnstats").click(function(){
        var order_by = $(this).data("order");
        //alert(order_by);

        // Reset the canvas
        RGraph.Reset(document.getElementById("mycanvas"));

        // Prepare data to send over server
        data = 'order_by='+order_by;
        RGraph.AJAX.getJSON('ajax/update-chart.php?'+data, draw_graph);
    })

});

// This is the AJAX callback function. It splits up the response, converts it to numbers and then creates the chart.
function draw_graph(json)
{
    // Set the JSON on the window object so that the button below can show it to the user.
    //window.__json__ = json;
    //$p(window.__json__);

    // Reset the canvas
    RGraph.Reset(document.getElementById("mycanvas"));

    // Now draw the chart
    var bar = new RGraph.Bar({
        id: 'mycanvas',
        data: json.data,
        options: {
            labels: json.labels,
            gutter: {
                left: 50
            }
        }
    }).draw()
}
</script>
</head>
<body>

    <canvas id="mycanvas" width="600" height="250">[No canvas support]</canvas>

    <br />

    <input type="button" id="btnstats" value="Order By Stats" data-order="statistics" />

</body>
</html>

更新chart.php：

<?php
require_once '../includes/db-config.php';

/*
echo "<pre>";
print_r($_GET);
echo "<pre>";
*/

// Order by day
if(isset($_GET['order_by']) && $_GET['order_by'] == "statistics")
{
    $order_by = $_GET['order_by'];

    $query = "SELECT * FROM `tb_daily_statistics` ";
    $query .= "ORDER BY " . $order_by;

    $rs = mysqli_query($con, $query);

    $labels = array();
    $data = array();

    while($row = mysqli_fetch_array($rs))
    {
        $labels[] = $row['day'];
        $data[] = $row['statistics'];
    }

    // Now you can aggregate all the data into one string
    $data_string = "[" . implode(", ", $data) . "]";
    $labels_string = "['" . implode("', '", $labels) . "']";

    echo json_encode(array('data' => $data_string, 'labels' => $labels_string));
}
?>

服务器的响应很好。这是我收到的内容：

{"data":"[64, 75, 84, 94, 95, 98, 124]","labels":"['Wed', 'Fri', 'Sun', 'Thu', 'Tue', 'Sat', 'Mon']"
}

可能是什么问题？

Answer 1

来自服务器的响应没有以RGraph理解的正确方式格式化。这是

{"data":"[64, 75, 84, 94, 95, 98, 124]","labels":"['Wed', 'Fri', 'Sun', 'Thu', 'Tue', 'Sat', 'Mon']"
}

如果你这样做

window.__json__ = json;
$p(window.__json__);

在你的draw_graph（json）函数中，然后来自服务器的响应将是

 Object {
        data => [64, 75, 84, 94, 95, 98, 124] (string, 29)
        labels => ['Wed', 'Fri', 'Sun', 'Thu', 'Tue', 'Sat', 'Mon'] (string, 49)
    }

这是错误的。相反它应该是

Object {
        data =>         Object {
            0 => 64 (number)
            1 => 75 (number)
            2 => 84 (number)
            3 => 94 (number)
            4 => 95 (number)
            5 => 98 (number)
            6 => 124 (number)
        }
        labels =>         Object {
            0 => Wed (string, 3)
            1 => Fri (string, 3)
            2 => Sun (string, 3)
            3 => Thu (string, 3)
            4 => Tue (string, 3)
            5 => Sat (string, 3)
            6 => Mon (string, 3)
        }
    }

要解决您的问题，请将update-chart.php中的几行代码更改为

这

$data[] = $row['statistics'];

到

$data[] = (int) $row['statistics'];

删除以下行：

// Now you can aggregate all the data into one string
$data_string = "[" . implode(", ", $data) . "]";
$labels_string = "['" . implode("', '", $labels) . "']";

这

echo json_encode(array('data ' => $data_string , 'labels' => $labels_string));

到

echo json_encode(array('data' => $data, 'labels' => $labels));

在RGraph中this.canvas为null

1 个答案: