0

質問から始めます。MySql DB を照会する php ファイルがあります。その結果を JavaScript の配列に入れて、プロットできるようにします (jQuery の flot を使用)。誰もそれを行う方法を知っていますか?

私がこれまでにやったことはうまくいきます：

  1. グラフをプロットする非常に優れた jQuery-flot コードがあります。このコードのこの質問で最も重要な変数は「data1」です。
  2. mysql データベースからデータを出力する AJAX (php ファイル付き)

「data1」変数 (jquery-flot コード内)、データベースからのデータ (時間とデータ) を入れたいのですが、php ファイルの結果を data1 変数に「接続」する方法が見つかりません。

jQuery-flot チャート プロット コード (「data1」変数に注意してください):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>Flot Example</title>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.selection.js"></script>
</head>
<body>
    <h1>Flot Examples</h1>s
    <div id="placeholder" style="width:600px;height:300px"></div>
    <div id="overview" style="width:160px;height:100px"></div>
    <script type="text/javascript">
     /*Show Tooltip*/
     function showTooltip(x, y, contents) {
     $('<div id="tooltip">' + contents + '</div>').css({
         position: 'absolute',
         display: 'none',
         top: y + 5,
         left: x + 5,
         border: '1px solid #fdd',
         padding: '2px',
         'background-color': '#fee',
         opacity: 0.80
     }).appendTo("body").fadeIn(200);
 }

 //End of Tooltip    
 var data, data1, options, optionsOverview, chart, overview;
 var data2 = [],
 data3 = [];
 data1 = [
     [1, 4],
     [2, 5],
     [3, 6],
     [4, 9],
     [5, 7],
     [6, 6],
     [7, 2],
     [8, 1],
     [9, 3]
 ];

 for (var i = 1; i < 10; i++) {
     data2.push([i, i * 2])
 }

 for (var i = 1; i < 10; i++) {
     data3.push([i, 10 * Math.random()])
 }

 data = [{
     data: data1,
     label: "fixed",
     lines: {
         show: true
     }
 }, {
     data: data2,
     label: "linear",
     lines: {
         show: true
     },
     points: {
         show: true
     }
 }, {
     data: data3,
     label: "random",
     bars: {
         show: true,
         barWidth: 0.5
     }
 }];

 options = {
     legend: {
         position: "nw"
     },
     grid: {
         clickable: true,
         hoverable: true
     }
 };

 //SELECTION 
 optionsOverview = {
     legend: {
         show: false
     },
     selection: {
         mode: "xy"
     }
 };

 $(document).ready(function () {
     chart = $.plot($("#placeholder"), data, options);
     //SELECTION 
     overview = $.plot($("#overview"), data, optionsOverview);
 });

 /*SELECTION*/
 $("#overview").bind("plotselected", function (event, ranges) {
     chart.setSelection(ranges);
 });

 $("#placeholder").bind("plotselected", function (event, ranges) {
 if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
     ranges.xaxis.to = ranges.xaxis.from + 0.00001;
 }
 if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
     ranges.yaxis.to = ranges.yaxis.from + 0.00001;
 }
 plot = $.plot("#placeholder", data,
     $.extend(true, {}, options, {
         xaxis: {
             min: ranges.xaxis.from,
             max: ranges.xaxis.to
         },
         yaxis: {
             min: ranges.yaxis.from,
             max: ranges.yaxis.to
         }
     })
 );
 overview.setSelection(ranges, true);

 });
 //End of Selection
 /*Show Tooltip*/

 $("#placeholder").bind("plothover", function (event, pos, item) {
     $("#tooltip").remove();
     if (item) {
         var x = item.datapoint[0].toFixed(2),
         y = item.datapoint[1].toFixed(2);
        showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " - " + y);
     }
 });
//End of Tooltip
</script>
    <br /><br /><br />

</body>
</html>

一方、MySQL DB があります。

mysql> select * from example5;
+------+------+
| time | data |
+------+------+
|    1 |    1 |
|    1 |    2 |
|    2 |    3 |
|    3 |    6 |
|    4 |    9 |
|    5 |   10 |
|    6 |   15 |
|    7 |   20 |
+------+------+
8 rows in set (0.00 sec)

ajax/php ファイルでアクセスします: index.html:

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "getdata.php?q=" + str, true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select Time:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="4">7</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

および getdata.php:

<?php
$q=$_GET["q"];


$con = mysqli_connect('localhost','root','12345678','test');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"test");
$sql="SELECT * FROM example5 WHERE time = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Time</th>
<th>Data</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['time'] . "</td>";
  echo "<td>" . $row['data'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?>

助けてくれてありがとう、ノーム

4

2 に答える 2

4

PHP と Javascript の間で通信する簡単な方法は、JSON です。PHP は JSON の配列を簡単にエンコード/デコードでき、JS はオブジェクトで同じことを行うことができます。次のことを試してみてください。

PHP スクリプトで、データを含む JSON 配列を返します。

<?php
    $q=$_GET["q"];
    $con = mysqli_connect('localhost','root','12345678','test');
    if (!$con)
    {
        die('Could not connect: ' . mysqli_error($con));
    }

    mysqli_select_db($con,"test");
    $sql="SELECT * FROM example5 WHERE time = '".$q."'";

    $result = mysqli_query($con,$sql);

    $returnArray = array();
    while($row = mysqli_fetch_array($result))
    {
         $returnArray[] = array($row['time'], $row['data']);
    }
    echo json_encode($returnArray);
    mysqli_close($con);
?>

Javascript で、次のような AJAX 呼び出しを作成します (私は JQuery を使用しています)。

function retrieveResults(str){
jQuery.ajax({
        type: 'GET',
        url: "getdata.php",
        data: {
            q: str,
        }, 
        success: function(data, textStatus, jqXHR) {
            var json = $.parseJSON(data);
                $.each(json, function(index, value) {
                    data1.push(value); // Not sure if it is correct, you might need to do some changes, but this is for the global idea 
                }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('An error occurred:'+errorThrown);
        }
    });
}
于 2013-08-12T09:00:36.207 に答える
0

それを見て、データベースからこの JavaScript を出力しようとしていますか? data1 = [ [1,4]、[2,5]、[3,6]、[4,9]、[5,7]、[6,6]、[7,2]、[8,1] ,[9,3] ];

コードが .php ページにある限り、javascript 行をエコーアウトできます。

<?php echo 'data1 = ['.while($row = mysqli_fetch_array($result)){echo '['$row['time'].",".$row['data'].'],';}.'];'

これは、getdata.php と同様にデータベースに接続した後になります。

于 2013-08-12T09:07:04.290 に答える