使用 AJAX/Jquery 使用 MongoDB 投影填充 Google 图表答案

【问题标题】：Populating a Google Chart with a MongoDB Projection using AJAX/Jquery使用 AJAX/Jquery 使用 MongoDB 投影填充 Google 图表
【发布时间】：2017-05-02 21:15:34
【问题描述】：

我刚刚完成了其网站上的 MongoDB tutorial for nodejs，并正在尝试构建一个非常简单的测试用例，用于通过 AJAX 将查询结果发送到 Google Chart。

这是我用来生成查询的 nodejs 文件：

代码：

var MongoClient = require('mongodb').MongoClient,
assert      = require('assert');

MongoClient.connect('mongodb://localhost:27017/crunchbase', function(err, db) {
assert.equal(err, null);
console.log('The app is now running');

var query      = {name:  { $regex: /^m/}, founded_year: { $gte: 2009 }};
var projection = {name: 1, founded_year: 1, _id: 0};
var cursor     = db.collection('companies').find(query);
cursor.project(projection);
});

我用来将光标加载到谷歌图表comes from this page的示例。

这是我用来生成图表的示例代码：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<!--Load the AJAX API for Google Charts- -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var jsonData = $.ajax({
        url: "http://localhost:27017/crunchbase",
        dataType: "jsonp",
        asynchronous: true
    }).responseText;

    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.Table(document.getElementById("chartDiv"));
    chart.draw(data);

  }
</script>
</head>
<body>
<h1 style="text-align: center">Companies Starting With "M" Founded After 2009</h1>
<div id="chartDiv">
</div>
</body>
</html>

我目前在控制台中收到此错误消息：

错误消息：

Uncaught SyntaxError: Unexpected identifier    crunchbase?callback=jQuery1102076…_1481945533315&_=1481945533316:1

另外值得注意的是：我将 dataType 更改为 jsonp 和 asynchronous 更改为 true 以使错误消息消失，但这些与给出的示例背道而驰Google Charts 示例，因此这可能是相关的。

如果我的代码有点粗糙，我深表歉意，这实际上只是试图将 MongoDB 和 Google Charts 文档中的非常基本的示例组合在一起并让它们工作。

【问题讨论】：

标签： jquery ajax node.js mongodb google-visualization

【解决方案1】：

当asynchronous: true-->需要等待请求完成，
在尝试使用数据/绘制图表之前

见.done -- 尝试跟随 sn-p...

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  $.ajax({
    url: "http://localhost:27017/crunchbase",
    dataType: "jsonp",
    asynchronous: true
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.Table(document.getElementById("chartDiv"));
    chart.draw(data);
  }).fail(function (jqXHR, textStatus, errorMessage) {
    console.log(errorMessage);
  });
}

【讨论】：

希望对您有所帮助 -- 仅供参考：如果您想直接从 json 创建 google 数据表，则需要匹配 format found here...