如何从node.js服务器接收nvd3.js中的数据

How to receive data in nvd3.js from a node.js server?

本文关键字：js nvd3 数据 服务器 node      更新时间：2024-02-24

这可能是一个非常直接的问题，但我对d3.js.node.js甚至JavaScript都是新手。

我想从MySQL数据库中的一个表中获取数据，并使用nvd3.js.中的图将其绘制为动态折线图（因为该表一直在接收流数据）

到目前为止，我已经使用node.js创建了一个服务器，并从表中获取行，将它们转换为JSON并打印出来。这就是我所拥有的：

var mysql= require('mysql');
var http = require('http');
var d3 = require("d3");
var connection = mysql.createConnection({
  host     : '****',
  user     : '****',
  password : '****',
 database: '****'
});

connection.connect() ;

http.createServer(function (request, response)
{
        connection.query('SELECT * FROM table', function(err, result)
        {
                response.writeHead(200, { 'Content-Type': 'application/json'});
                response.end(JSON.stringify(result));
                response.end();
        });
}).listen(8084);

现在的问题是，因为我想使用这些数据用nvd3.js绘制一个图，所以我需要创建一个html文件，在其中我可以声明关于nvd3的库，并在那里绘制图。这样的东西：

<html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'>  </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css' rel='stylesheet'>
<div id='chart' style='height:500px'>
  <svg></svg>
  <script>
  nv.addGraph(function() {
    var chart = nv.models.lineWithFocusChart();
    ....

我的问题是，如何使用node.js服务器中的变量result，该变量将我想要的数据保存在html文件中？我应该直接从8084端口获取数据吗？我甚至需要使用html吗？

非常感谢。

附言：请不要包括使用PHP的解决方案，因为这不是我想要的。

您应该使用AJAX请求。你可以使用jQuery来帮助你：

var url = "localhost:8084" // Change this accordingly
$.getJSON(url, function(data) {
    // Create your chart here, for now just log it:
    console.log(data);
}).fail(function() {
    // Something went wrong:
    console.log("Error");
});

Demo

下面的饼图使用Stackoverflow的API中的JSON文档。它显示了没有答案的问题数量与至少有一个答案的问题的数量(https://api.stackexchange.com/2.2/info?site=stackoverflow)

var chartElement = d3.select("#chart svg");
var chart;
nv.addGraph(function() {
  chart = nv.models.pieChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .showLabels(true)
    .noData("Waiting for server...");
  chartElement
    .datum([])
    .call(chart);
  return chart;
}, function() {
  $.getJSON("https://api.stackexchange.com/2.2/info?site=stackoverflow", function(data) {
    var totalQuestions = data.items[0].total_questions;
    var totalUnanswered = data.items[0].total_unanswered;
    var totalAnswered = totalQuestions - totalUnanswered;
    var chartData = [{
      label: "Unanswered questions on SO",
      value: totalUnanswered
    }, {
      label: "Answered questions on SO",
      value: totalAnswered
    }];
    chartElement.datum(chartData);
    chart.update();
  }).fail(function() {
    chart.noData("Something went wrong :(");
    chart.update();
  });
});
#chart {
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<div id="chart">
  <svg></svg>
</div>

相关文章：