0

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

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

主页.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>

js.js

function getitdone(str)
{
if (str=="")
    {
        document.getElementById("midSpa").innerHTML="";
        return;
    } 
if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp11=new XMLHttpRequest();
    }
else
    {// code for IE6, IE5
        xmlhttp11=new ActiveXObject("Microsoft.XMLHTTP");
    }
        xmlhttp11.onreadystatechange=function()
    {
        if (xmlhttp11.readyState==4 && xmlhttp11.status==200)
            {
                document.getElementById("midSpa").innerHTML=xmlhttp11.responseText;
            }
    }

var awayRunner = document.getElementById('awayRunner').value;
var homeRunner = document.getElementById('homeRunner').value;

var queryString = "?awayRunner=" + awayRunner + "&homeRunner=" + homeRunner;
xmlhttp11.open("GET","getRunners.php" + queryString,true);
xmlhttp11.send(null);

}

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['...'];
    }
}

主页.php

<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 变量，使图表仅在单击按钮后才显示？

谢谢你。我希望这比我之前的问题更清楚。

4

1 回答 1

0

这是我如何使用 onchange 方法来刺激 MYSQL 查询并让 Highchart 显示结果。主要问题是返回的 JSON 数组是一个需要转换为 INT 的字符串。然后在数据中使用 resultArray 变量：highChart 的部分。

$(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);

于 2012-12-13T17:03:19.250 回答