Question

我正在从事一个项目，并且我通过大量的教程学习了几门新语言。我想我现在处于困境中。

基本上，我现在拥有的是用PHP编写的SQL查询，该查询被发送到JS函数以在Chart.js中使用。我也可以用php填写我的下拉列表。这里的一切都有效，因为它正确显示了硬编码县的图表。

我的下一步是能够根据下拉选项显示图表，我似乎无法做到。

到目前为止，这是我的工作代码：

<!DOCTYPE html>
<html>
<head>
    <title>
        Maybe this works
    </title>
    <style>
    </style>
    <script src="../Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
    <form method="post" action="query2.php">
        <select id="selectCounty" name="county"> 
        <!--Fill out the dropdown with counties-->
        <?php
            require("Database.php");
            require("Utils.php");
            $db = Database::getConnection();
            $sql = "SELECT DISTINCT county FROM STI";
            $statement = $db->prepare($sql);
            $statement->execute();
            $statement->bind_result($county);
            while($statement->fetch()){
                echo "<option value='$county'>$county</option>\n\t\t\t";
            }
            $statement->close();
        ?>
        </select>
        <input type="submit" value="Submit" id="submitButton"/>
    </form>
    <div class="chart-container">
        <canvas id="chart" width="960px" height="480px"></canvas>
    </div>
    <script type="text/javascript" src="graph2.js"></script>
</body>
</html>

这是我的查询文件：

<?php
require("Database.php");
require("Utils.php");
$db = Database::getConnection();
$co = $_POST['county'];
consoleLog($co);
$sql = "SELECT county, disease, count, year FROM STI WHERE county=\"$co\"";
$statement = $db->prepare($sql);
$statement->execute();
$statement->bind_result($county, $disease, $count, $year);
$statement->store_result();
$ar = array();

$diseases = ["Chlamydia", "Gonorrhea", "Total Early Syphilis", "HIV/AIDS"];

while($statement->fetch()){
    $county = trim($county);
    $contained = false;
    foreach($ar as $c){
        if($county == $c[0]){
            $contained = true;
            $ar[getCountyIndex($ar, $county)][getIndex($diseases, $disease) + 1][getYearIndex($year)] = $count;
        }
    }
    if($contained == false){
        $ar[] = [$county, array_fill(0, 10, -1), array_fill(0, 10, -1), array_fill(0, 10, -1), array_fill(0, 10, -1)];
        $ar[getCountyIndex($ar, $county)][getIndex($diseases, $disease) + 1][getYearIndex($year)] = $count;
    }
    unset($c);
}
print json_encode($ar);
$statement->close();

function getIndex($_ar, $_key){
    for($_i = 0; $_i < count($_ar); $_i++){
        if($_ar[$_i] == $_key){
            return $_i;
        }
    }
}
function getCountyIndex($_ar, $_county){
    for($_i = 0; $_i < count($_ar); $_i++){
        if($_ar[$_i][0] == $_county){
            return $_i;
        }
    }
}
function getYearIndex($_year){
    return $_year - 2006;
}
?>

和JS文件：

$("#submitButton").click(function(event){
event.preventDefault();
$.ajax({
    url : "https://sexspecs-cptcomo.c9users.io/Tut/query2.php",
    type : "GET",
    success : function(data) {
        console.log(data);
        var d = $.parseJSON(data);
        console.log(d[0][0]);
        var dat = {
            counties: [],
            chl : [],
            gon : [],
            tes : [],
            hiv : [],
        };
        for(var i = 0; i < d.length; i++){
            dat.counties.push(d[i][0]);
            dat.chl.push(d[i][1]);
            dat.gon.push(d[i][2]);
            dat.tes.push(d[i][3]);
            dat.hiv.push(d[i][4]);
        }
        console.log(dat);

        var chartData = {
            labels: [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015],
            datasets: [
                {
                    label: "Gonorrhea",
                    fill: false,
                    lineTension: 0.1,
                    borderColor: "rgba(59, 89, 152, 1)",
                    fillColor : "rgba(0,194,132,0.2)",
                    pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                    pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                    data: dat.gon[0]
                }, 
                {
                    label: "Chlamydia",
                    fill: false,
                    lineTension: 0.1,
                    fillColor: "rgba(29, 202, 255, 0.2)",
                    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: dat.chl[0]
                }, 
                {
                    label: "Total Early Syphillis",
                    fill: false,
                    lineTension: 0.1,
                    fillColor: "rgba(29, 202, 255, 0.2)",
                    backgroundColor: "rgba(35, 35, 35, 0.75)",
                    borderColor: "rgba(35, 35, 35, 1)",
                    pointHoverBackgroundColor: "rgba(35, 35, 35, 1)",
                    pointHoverBorderColor: "rgba(35, 35, 35, 1)",
                    data: dat.tes[0]
                }, 
                {
                    label: "HIV/AIDS",
                    fill: false,
                    lineTension: 0.1,
                    fillColor: "rgba(29, 202, 255, 0.75)",
                    backgroundColor: "rgba(0, 200, 0, 0.75)",
                    borderColor: "rgba(0, 200, 0, 1)",
                    pointHoverBackgroundColor: "rgba(0, 200, 0, 1)",
                    pointHoverBorderColor: "rgba(0, 200, 0, 1)",
                    data: dat.hiv[0]
                }
            ]
        };

        var ctx = document.getElementById("chart").getContext("2d");
        var chart = new Chart(ctx, {
            type: 'line',
            data: chartData,
        })
    },
    error : function(data) {
        console.log("ERROR");   
    }
})
})

此代码显示费尔法克斯郡的数据。我想根据选择下拉列表显示数据。我尝试将$_POST['county']放入查询php文件中，但它没有收到任何内容。然后，我使用包含在带有method="POST"和action="querying2.php"属性的表单标记中的select来尝试它，但这并不是因为它只是将我重定向到querying2.php文件。我删除了操作属性，但之后会将我重定向到末尾附加?=county=Fairfax+的网址，没有图表。

我错过了什么？

将表单数据导入PHP以获取chart.js的SQL查询

0 个答案: