如何在JavaScript中从MySQL数据库中获取数据来构建图表？

我正在尝试构建一个图表,我需要将MySQL 数据库表中的数据提取到一个 JavaScript变量中,该变量将采用以下格式：var variable1 = [[1,19],[2,11],[3,14 ],[4,16]].第一个数字(列)变为x,第二个数字在我的图表上为y.我在MysqL 数据库中的表看起来像这样(我简化了一下)：

column1 column2
   1      19
   2      11
   3      14
   4      16

最简单的方法是什么？我是新手,请原谅我提出一个非常简单的问题.

编辑：

在Wartus的回答的帮助下,我编码如下.
我制作了两个文件：带有JavaScript的HTML和一个 PHP 文件.这是我的HTML文件：

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <script language="javascript" type="text/javascript" src="flot/jquery.js"></script>       <!-- jQuery library -->
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>  <!-- Library with charts that I plan to use -->
    <script type="text/javascript">

    $.ajax({
       url : 'serv.PHP', // my PHP file
       type : 'GET', // type of the HTTP request
       success : function(result){ 
          var obj = jQuery.parseJSON(result);
          console.log(obj);
       }
    });

    </script>   
</head>
<body>
Hi
</body>
</html>

这是我的名为serv.PHP的PHP 文件,它位于与HTML文件相同的目录中：

<?PHP
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "datadb";

    // Create connection
    $conn = new MysqLi($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection Failed: " . $conn->connect_error);
    } 

    $sql = "SELECT column1, column2 FROM chartdata";  //This is where I specify what data to query
    $result = $conn->query($sql);
    echo json_encode($result);
?>

这一切似乎都没有错误,除了它检查控制台时它给出了空值：

Object {current_field: null, field_count: null, lengths: null, num_rows: null, type: null}

我究竟做错了什么？

解决方法:

在数据库中进行选择之后,你必须以json格式返回答案(对我来说,我只是创建一个带有要测试的值的数组)：

你的PHP 文件(我是serv.PHP)：

$data = array([1, 19], [2, 11], [3, 14], [4, 16]);
// replace $data by your code to select in DB
echo json_encode($data);

现在你必须在你的javascript代码中获得响应.要做到这一点,你必须在javascript或jQuery(我的情况下是jQuery)中发出“GET”请求：

这是你的js文件：

$.ajax({
   url : 'serv.PHP', // your PHP file
   type : 'GET', // type of the HTTP request
   success : function(data){
      var obj = jQuery.parseJSON(data);
      console.log(obj);
   }
});

在obj你有你的数据：

所以现在你拥有数据并访问,是一个数组：

 - obj[0] contains [1, 19], obj[0][0] contains 1 and obj[0][1] contains 19
 - obj[1] contains [2, 11], obj[1][0] contains 2 and obj[1][1] contains 11 ...

在您的情况下,variable1与obj相同

编辑
用你的DB：

在发送答案之前,您必须正确构建数据.所以在你的情况下,你有一个多维数组,这是我在名为data的数组中推送数组时所做的.

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "datadb";

// Create connection
$conn = new MysqLi($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection Failed: " . $conn->connect_error);
} 

$sql = "SELECT column1, column2 FROM chartdata";  //This is where I specify what data to query
$result = MysqLi_query($conn, $sql);

$data = array();
while($enr = MysqLi_fetch_assoc($result)){
    $a = array($enr['column1'], $enr['column2']);
    array_push($data, $a);
}

echo json_encode($data);

如何在JavaScript中从MySQL数据库中获取数据来构建图表？

相关文章