1
我正在使用repo。如何從mongodb獲取數據並使用nodejs顯示爲d3圖表
此回購提供顯示來自fixture_data.json文件中的內部數據的圖表。
現在我想顯示使用mongodb的數據。
然後我做了一些變化
app.js
var express = require('express');
var app = express();
var MongoClient = require('mongodb').MongoClient,
mongodb = require('mongodb'),
Server = require('mongodb').Server;
app.engine('.html', require('ejs').__express);
app.set('views', __dirname);
app.set('view engine', 'html');
var mongoclient = new MongoClient(new Server("localhost", 27017));
var db = mongoclient.db('mydb');
var fixtureData = require('./fixture_data.json');
app.locals.barChartHelper = require('./bar_chart_helper');
app.get('/', function(req, res) {
res.render('index', { fixtureData: fixtureData });
});
app.get('/hello', function(req, res) {
db.collection('things').find({},{'Created':1, 'Total Price':1}).toArray(function(err, doc){
res.render('hello', { 'docs': docs});
})
});
app.listen(3000);
console.log('listening on port 3000');
，這是我hello.html的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D3 Server-side Demo</title>
<style>
body {
background-color: #f5f5f5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
}
.svg-chart .background {
shape-rendering: crispEdges;
stroke: #ccc;
fill: #fdfdfd;
stroke-width: 1px;
}
.svg-chart .bar { fill: #4682B4; }
</style>
</head>
<body>
<h1>D3 Server-side Demo</h1>
<%-
barChartHelper.getBarChart({
data: docs,
width: 400,
height: 300,
xAxisLabel: '2012',
yAxisLabel: 'Views',
containerId: 'bar-chart-small'
})
%>
<hr>
<%-
barChartHelper.getBarChart({
data: docs,
width: 800,
height: 600,
xAxisLabel: '2012',
yAxisLabel: 'Views',
containerId: 'bar-chart-large'
})
%>
</body>
</html>
的問題是：
時一世嘗試訪問http://localhost:3000/hello，然後頁面不斷加載。