在同一页面上将F（x）转换为php到Highchart

Question

我继续前面的问题，它是在onclick-> mysql query-> javascript上被询问的； 同一页

这是我的onchange函数，用于下拉名称。 每次更改下拉菜单时都会调用它。 想法是将每个跑步者的姓名发送到php页面以运行mysql查询，然后返回3个要输入到javascript中的数组。

function sendCharts() {
var awayTeam = document.getElementById('awayRunner').value;
var homeTeam = document.getElementById('homeRunner').value;        


if(window.XMLHttpRequest) {
    xmlhttp14 = new XMLHttpRequest();

}
else {
    xmlhttp14 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp14.onreadystatechange = function() {
    if(xmlhttp14.readyState == 4 && xmlhttp14.status == 200) {

   var parts = xmlhttp14.responseText.split(','); //THIS IS WHAT IS RETURNED FROM THE MYSQL QUERY. WHEN I ALERT IT, IT OUTPUTS IN THE FORM 14,15,18,16,17,12,13 

          ... code that generates the chart 
        series: [   {
                        name: document.getElementById('awayRunner').value,
                        data: [parts,','], //THIS IS WHERE AN ARRAY MUST BE ENTERED. THIS OUPUTS ONLY ONE NUMBER 
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {

                        name: document.getElementById('homeRunner').value,
                        data: parts, // TRIED THIS
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {
                        name: 'League Avg',
                        data: [], //THIS IS WHERE 3rd ARRAY MUST BE ENTERED
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
    });

    }
}
xmlhttp14.open("GET", "getCharts.php?awayRunner="+awayRunner+"&homeRunner="+homeRunner, true);
xmlhttp14.send();

}

我的PHP代码看起来像这样。 正如您将看到的，必须返回3个数组才能将它们输入到javascript中的不同位置以生成代码。

$away=$_GET['awayRunner'];
$home=$_GET['homeRunner'];

$db=mydb;



$homeRunner=array();
$awayRunner = array();
$totalOverall= array();

$getHome="select column from $db where tmName = '$home'";
$result2 = mysql_query($getHome);
while($row = mysql_fetch_array($result2)){
$homeRunner[]= $row['column'];
}

$getAway="select column from $db where tmName ='$away'";
$result22 = mysql_query($getAway);
while($row2 = mysql_fetch_array($result22)){
$awayRunner[]= $row2['column'];

}

$week = 0;
while($week<20){
$week++;
$teamCount = "select count(column) from $db where week = $week";
$resultTeam =  mysql_query($teamCount);
$rowTeam = mysql_fetch_array($resultTeam);
$t = $rowTeam['count(column)'];

$getLeague = "select sum(column) from $db where week = $week";
$resultLeague = mysql_query($getLeague);
while($row3 = mysql_fetch_array($resultLeague)){
    $totalOverall[]=$row3['sum(column)']/$t;
    }
}
echo join(',',$awayRunner);

当前，通过这种方式，图表仅输出数组中的第二个值。 例如，如果var part等于23,25,26,24,23 ...仅显示25。

前一个问题的答案如下：

1. 加载页面。
2. 用户选择一个选项。
3. 一个onChange侦听器触发AJAX请求
4. 服务器接收并处理请求
5. 服务器发回一个JSON数组的选项供相关选择
6. 客户端AJAX发送者获得响应
7. 客户端更新选择以具有JSON数组中的值。

我迷上了＃的5-7。有人可以提供示例代码来完成此操作吗？ 通常，我只是问路，但是我已经在这个问题上停留了好几天。 我准备放弃在网站上放置图表的想法。 提前致谢

EDIT

这是我发送和接收一个请求的第一个更改

<script>
$(function(){
    $("#awayRunner").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "data=" + $("#awayRunner").val(),
        dataType: "json",
        url: "/my.php",
        success: function(response){
            alert(response);  
        }
        });
    });
});

警报框中显示的数据格式为12,15,16,15。 现在，当我输入data：响应时，图表中仅显示每个数字的第二个数字。 有任何想法吗？

EDIT

好的，所以我发现响应中的信息是一个字符串。 必须使用parseInt将其转换为INT，才能在图表中使用。 目前，我有

$("#awayTeam").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "away=" + $("#awayTeam").val(),
        dataType: "json",
        url: "/getCharts.php",
        success: function(response){
              var asdf = [];
              asdf[0] = parseInt(response[0]);
              asdf[1] = parseInt(response[1]);
              asdf[2] = parseInt(response[2]);
              asdf[3] = parseInt(response[3]); 
              alert(asdf);

将不得不编写一个函数来使这个更加干净。

Answer 1

我不敢相信，但我终于明白了。 这是我使用onchange方法刺激MYSQL查询并让Highchart显示结果的方式。 主要问题是返回的JSON数组是需要转换为INT的字符串。 然后，在highChart的data：部分中使用resultArray变量。

$(function(){
    $("#awayTeam").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "away=" + $("#awayRunner").val(),
        dataType: "json",
        url: "/getCharts.php",
        success: function(response){
              var arrayLength = response.length;
              var resultArray = [];
              var i = 0;
              while(i<arrayLength){
                  resultArray[i] = parseInt(response[i]);
                  i++;
              }            

在PHP代码中，数组必须像JSON这样返回

echo json_encode($awayRunner);