在 node.js 中从 mysql 接收数据以绘制图形答案

【问题标题】：Receive data from mysql in node.js to draw graph在 node.js 中从 mysql 接收数据以绘制图形
【发布时间】：2016-01-14 13:46:19
【问题描述】：

我正在学习 node.js，我想编写一个程序来绘制从 mysql 数据库中获取的数据图。我在 server.js 文件中进行后端处理并在 index.html 中显示结果。因为我是 node.js 和网络编程的新手。我不知道如何获取数据作为 javascript 对象并绘制它的图形。

问题：我想知道如何将提取到 javascript 对象中的数据发送到图形绘制代码。

这是我的 server.js：

var mysql = require('mysql');
var express = require('express');
var app =express();
var country = [], population = [], gdp = [];
var jsonArray;

var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '12345',
  database: 'rohan'
});
var queryString = 'SELECT * FROM Country';

// Fetching data from database
app.get('/', function(req, res) {
  connection.query(queryString, function(err, rows, fields) {
    if(err) throw err;
    formatData(rows);
    res.send(jsonArray);
    console.log(jsonArray);
  });
});

function formatData(dataArray) {
  for(var i = 0; i < dataArray.length; i++) {
    country[i] = dataArray[i].name;
    population[i] = dataArray[i].population;
    gdp[i] = dataArray[i].GDP;
  }
  jsonArray = [country, population, gdp];
  console.log("in FormatData()...\n");
  console.log(jsonArray);
}

app.listen(3000, function() {
  console.log("Server listening on port 3000");
});

这是我的 index.html：

<html>
  <head>
    <title>Chart-mysql demo</title>
    <script>
      // code to draw graph
      $("#clients").bind('ajax:success', function(result) {
        console.log("In index.html" +  result);
        alert(result);
        var barData = {
          label:result.country,
          datasets: [
            {
              label: '2010 Customers #',
              fillColor: '#382765',
              populationData:result.population
            }
          ]
        };
       var context = document.getElementById('clients').getContext('2d');
       var clientsChart = new Chart(context).Bar(barData);

      });
    </script>
  </head>

  <body>
    <h1>Country Demographics</h1>
    <script src="Chart.js"></script>
    <script src="app.js"></script>
    <canvas id="clients" width=500 height=400></canvas>
  </body>
</html>

【问题讨论】：

所以你已经在客户端收到数据了，问题是如何绘制它？
不，我没有在客户端接收数据。
我正在接收数据，但我希望数据作为 javascript 对象，以便我可以使用它来由 chat.js 处理
你试过关闭 node.js 再打开吗？
开玩笑的。我们这里缺少信息，您可能也应该发布app.js 的内容。

标签： javascript html mysql node.js

【解决方案1】：

我看到您没有从 node.js 应用程序中获取数据。首先，您需要以某种方式从服务器检索此 html，因此您需要添加以下内容：

app.get('/', function(req, res) {
    res.render('index.html');
});

然后你需要将你当前的 app.get('/' 更改为另一个 url。比如说“/data”。更改后，您需要更改当前的 index.html，并在其中添加 JS 代码，该代码将从“/data”请求数据。您可以为此使用 jquery。看一下http://api.jquery.com/jquery.ajax/ 然后你会在Jquery ajax 请求到node.js "/data" 的回调中得到一个JS 对象。

【讨论】：

嗯，我正在从 app.get(..) { } 方法发送数据。我在客户端接收它，但问题是我想在 javascript 对象中接收它。是的，AJAX 调用可以使这成为可能。如果您能告诉我更改 url 时将触发的 JQUERY 事件，我将不胜感激。
很抱歉，但不确定您在“url chanded”下是什么意思。你的意思是你打开了html文件，然后用浏览器导航到新的url？
要在页面加载时进行 ajax 调用，您只需将函数 gData 内容移到函数之外。

【解决方案2】：

你应该首先编写一个模块来获取数据（你有一段代码连接到数据库，所以我们可以跳过这部分）。

然后我们应该编写一个路由器，它将数据传递给路径名（当它被调用时），例如：

router.get('/', function(req, res, next) {
    api.apiGet(function (data){

->从模块导入数据（api是导入模块的变量，api从api获取函数）。

        res.render('portal', {result: data}); -> data is passed as result
    });
});

然后您将编写一个使用该数据的视图，例如在 Jade 中，它将如下所示。

{val[4].label}

它只是抓取以 JSON 格式发送的数据。

如果您需要清除一些东西，请写:)

【讨论】：

感谢您的回答。但我没有使用视图。我只想将 mysql SELECTED 数据作为 javascript 对象发送到客户端代码。如果您能提供更多代码来处理 index.html 文件，我将不胜感激。

【解决方案3】：

经过几个小时的挠头，我终于做到了。就服务器端而言，我做得对。我只是不知道如何处理客户端上的数据。为了以 javascript 对象的形式接收数据，我添加了一个按钮并将 AJAX 调用连接到它的 onclick() 事件。

  <body>
    <h1>Country Demographics</h1>
    <button id="Get_Graph" onclick="gData(); return false">Get Graph<button/>
    <canvas id="clients" width=500 height=400></canvas>
  </body>

为了处理它的点击事件，这里是javascript代码：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../Chart.js"></script>

<script>
  // code to draw graph

  function gData() {
    $.get("http://localhost:3000", function(result, status) {
      alert(result);
      var barData = {
        labels:result[0],
        datasets: [
          {
            label: '2010 Customers #',
            fillColor: '#382765',
            data: result[2]
          }
        ]
      };
     var context = document.getElementById('clients').getContext('2d');
     var clientsChart = new Chart(context).Bar(barData);
    });
 }
</script>

【讨论】：