PHP到JavaScript图表；带按钮的显示器

我使用的图表是用JavaScript编写的，所以我需要将mysql查询数组传输到JavaScript，创建图表。mysql查询是通过下拉菜单生成的。网页上有一个按钮，单击该按钮时，应显示图表。所有内容都应显示在同一页上

我有两个下拉菜单，每个菜单上都有跑步者的名字。通过onChange，每个下拉菜单调用相同的JavaScript函数-

home.php

<form id='awayPick'>    
    <select name='awayRunner' id='awayRunner' onchange='Javascript: getitdone(this);/> 
        ...multiple options
</form>
<form id='homePick'>    
    <select name='homeRunner' id='homeRunner' onchange='Javascript: getitdone(this);/>
       ...multiple options
</form>

<script type="text/javascript">
    function chartOne(){
$(document).ready(function() {
    var chart = new Highcharts.Chart({
          chart: {
             renderTo:'container', 
             zoomType:'xy'             },

        title:  {
                    text:

'title'
                },

        xAxis:  {
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
                },

        yAxis: [{ // Primary yAxis
        labels: {
            formatter: function() {
                return this.value + 'pts'
            },
            style: {
                color: '#89A54E'
            }
        },
        title: {
            text: 'text',
            style: {
                color: '#89A54E'
            }
        }
    }, { // Secondary yAxis
        title: {
            text:null,
            },

    }],
    tooltip: {
        formatter: function() {
            return '' +
                this.y + 
            (this.series.name == ' ' ?  ' mm' : 'pts');
        }
    },
        legend: {
                    layout: 'horizontal',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 69,
                    y: 20,
                    floating: true,
                    shadow: true,
                },

      plotOptions: {
                        column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                    },

        series: [   {
                        name:'adfg',
                        data: [ <?php echo join($awayRunner, ',');?>],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {

                        name:'fghtrht',
                        data: [<?php echo join($homeRunner, ',');?>],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {
                        name: 'League Avg',
                        data: [ <?php echo join($leagueRunner, ',');?>],
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
        });
});
    }
    </script>


<input type='submit' value='chart One' onclick='chartOne()'></input>
<div id='container' style='width: 50%; height: 200px; float: left;'></div>

getRunners.php

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

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

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


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

}
$week = 0;
while($week<20){
    $week++;
    $getLeague = "select ... from $db where ... = $week";
    $resultLeague = mysql_query($getLeague);
    while($row3 = mysql_fetch_array($resultLeague)){
    $leagueRunner[]=$row3['...'];
    }
}

home.php

<form id='awayPick'>    
    <select name='awayRunner' id='awayRunner' onchange='Javascript: getitdone(this);/> 
        ...multiple options
</form>
<form id='homePick'>    
    <select name='homeRunner' id='homeRunner' onchange='Javascript: getitdone(this);/>
       ...multiple options
</form>

<script type="text/javascript">
    function chartOne(){
$(document).ready(function() {
    var chart = new Highcharts.Chart({
          chart: {
             renderTo:'container', 
             zoomType:'xy'             },

        title:  {
                    text:

'title'
                },

        xAxis:  {
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
                },

        yAxis: [{ // Primary yAxis
        labels: {
            formatter: function() {
                return this.value + 'pts'
            },
            style: {
                color: '#89A54E'
            }
        },
        title: {
            text: 'text',
            style: {
                color: '#89A54E'
            }
        }
    }, { // Secondary yAxis
        title: {
            text:null,
            },

    }],
    tooltip: {
        formatter: function() {
            return '' +
                this.y + 
            (this.series.name == ' ' ?  ' mm' : 'pts');
        }
    },
        legend: {
                    layout: 'horizontal',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 69,
                    y: 20,
                    floating: true,
                    shadow: true,
                },

      plotOptions: {
                        column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                    },

        series: [   {
                        name:'adfg',
                        data: [ <?php echo join($awayRunner, ',');?>],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {

                        name:'fghtrht',
                        data: [<?php echo join($homeRunner, ',');?>],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {
                        name: 'League Avg',
                        data: [ <?php echo join($leagueRunner, ',');?>],
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
        });
});
    }
    </script>


<input type='submit' value='chart One' onclick='chartOne()'></input>
<div id='container' style='width: 50%; height: 200px; float: left;'></div>

如何将php数组返回到主页并放入javascript中？我应该把JavaScript放在其他地方吗

问题是，当我没有尝试传递跑步者的名字时，我已经把所有这些都放在了单独的页面上。如果我在getRunners.php页面上明确说明了跑步者的名字，那么一切都很好。我无法将php变量插入JavaScript以生成图表

我尝试将js代码分配给getRunners.php页面中的一个php变量，然后在home.php页面上回显该变量，但该变量不起作用

看起来，一旦加载了主页，JS就保持不变。选择下拉选项后，如何传递PHP变量，使图表仅在单击按钮后显示

---

多谢各位。我希望这比我先前的问题更清楚

下面是我如何使用onchange方法来激发MYSQL查询并让Highchart显示结果的。主要的问题是返回的JSON数组是一个需要转换为INT的字符串。resultArray变量随后用于highChart的data:部分

$(function(){
  $("#awayRunner").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

你指的是什么？我重读了一遍，我不确定它是否很清楚。一、 或多或少，我希望只有在下拉菜单查询了创建我需要按钮调用的javascript的DB之后，按钮才能调用java函数。所有这些都需要显示在同一个网页上。问题是，我无法在最初编译网页后重新编写javascript。我感觉您可能正在以一种不可扩展或不灵活的方式编写javascript函数。如果操作正确，只需将参数传递给函数；不动态编写。您可以在此处和此处查看所有与此相同问题相关的其他线程