我正在做一个项目，我有一个名为app.js的nodejs文件和一个html文件index12.html。我有一个mssql数据库，我通过.js文件查询。我可以在控制台中以json格式显示查询结果。现在我需要在html文件中使用这些数据，所以我可以使用它绘制一个饼图（我已经使用了d3 js）。我正在使用jquery来实现这一目标。但是我无法将数据输入到html文档中。
我是jQuery和
的新手 在HTMl文档中，我正在做$ .getScript（“文件”），我不知道它是否正确以下是
的代码APP.JS AND INDEX12.HTML
var http = require('http'); //connect withb http
var sql = require('mssql'); //connect with sql
var express = require('express'); //connect with express
var path = require('path');
var app = express();
var jQ = require('jquery');
env: {
browser: true
}
//new beg.
var Connection = sql.Connection;
var Request = sql.Request;
//new end
var a; var recordSet;
var config = {
server: '10.2.13.211', //my IP address - obtained through ipconfig
//server: '.',
database: 'trialdb', //my table is within this server
user: 'sa', //windows authentication uses this username & password
password: 'admin123#',
port: 1433 //deafault port number
};
function send404Response(response) {
response.writeHead(404, { "Context-Type": "text/plain" }); //display plain text
response.write("Error 404:Page not found");
response.end(); // we need to end each
}
function loadEmployees() { // connection with ms sql table
var dbConn = new sql.Connection(config);
dbConn.connect().then(function () { //using promises instead of callbacks(onceconnect() is done), then go to then()
var request = new sql.Request(dbConn);
request.query("select * from list").then(function (recordSet) { //once query is executed, then go to then()
// console.log(recordSet);
a = recordSet[1].errors;
// return recordSet;
dbConn.close(); //close connection
}).catch(function (err) {
console.log(err);
dbConn.close();
});
}).catch(function (err) {
console.log(err);
});
}
app.use(express.static('D:/d3 project/project_part1/project_part1/'));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../../index12.html'));
});
app.get('/abt', function (req, res) {
res.sendFile(path.join(__dirname, '../../startpage.html'));
});
function onRequest(request, response) {
if (request.method == 'GET' && request.url == '/') {
console.log("user made a request" + request.url);
response.writeHead(200, { "Context-Type": "text/plain" });
loadEmployees();
setTimeout(function () {
// response.write("here is some data");
response.write("hiya" + a);
response.end();
}
, 200);
}
else {
send404Response(response); console.log('error 404');
}
}
http.createServer(onRequest).listen(8888); //creates a new instance of server when a request arrives as port 8888 & executes function onRequest()
console.log('server will run on requset to port 8888');
var server = app.listen(8081);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Step 3 - Adding a Legend</title>
<script> </script>
<style>
rect{
stroke-width: 2;
}
.legend{
stroke:black;
opacity:1;
font-size: 12px;
}
text{
font-family: sans-serif;
font-size: 10px;
fill:black;
}
</style>
</head>
<body>
<p>hi how ru</p>
<div id="chart"></div>
<button type="button">Change Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="d3/d3.js"></script>
<script type="text/javascript" src="app.js"></script>
<select id ="slctmodel"></select>
<script>
var dataset;
$(document).ready(function () {
//$.getJSON("app.js", success = function (data) {
$.getScript("app.js", success = function (data) {
dataset = data;
});
setTimeout(function () {
/* dataset = [
{ "module": "A", "errors": 50 },
{ "module": "B", "errors": 120 },
{ "module": "C", "errors": 10 },
{ "module": "D", "errors": 200 },
{ "module": "E", "errors": 27 },
{ "module": "F", "errors": 25 },
{ "module": "G", "errors": 40 }
];*/
console.log(dataset);
var width = 1500; //width and height of svg
var height = 1500;
var radius = 150;
var legendRectSize = 16; //rect size of the coloured box at index
var legendSpacing = 4; //spacing b/n two small rect boxes
console.log("hi1");
var color = d3.scale.ordinal() //specific modules pertain to specific colours independant of the no. of values in it
.domain(["A", "B", "C", "D", "E", "F", "G", ])
.range(["#FFEBAA", "#EEAB79", "#955C52", "#BE4C60", "#B42E61", "#851362", "#5E0063"]);
var svg = d3.select('#chart') // selecting the division with id 'chart' and appending svg and group to it.
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + 850 + ',' + 250 + ')');
d3.select('#chart svg') //within the chart svg,append text
.append("text")
.attr("x", 850)
.attr("y", 30)
.attr("text-anchor", "middle")
.text("PROBABILITY OF FAILURE IN MODULES"); //append text at the center
var arc = d3.svg.arc() //create an arc of specified inner & outer radius
.innerRadius(30)
.outerRadius(radius);
var arcOver = d3.svg.arc() //create an arcOver of specified inner & outer radius- when mouse moves over, arc changes
.innerRadius(20)
.outerRadius(radius + 30);
console.log("hi2");
var pie = d3.layout.pie() //create pie (occurs acc to arc created), sector it according to values in dataset[]
.value(function (d) { return d.errors; })
.sort(null); //sort-pie diagram is sorted
var path = svg.selectAll('path') //add the arc to svg in the form of a path
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function (d, i) {
return color(d.data.module);
})
.attr("opacity", 1)
.attr("stroke", "black")
.attr("stroke-width", 2)
.on("mouseenter", function (d) { //as mouse enters, provide transition to arcOver
d3.select(this)
.attr("stroke", "black")
.transition()
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width", 4)
.attr("opacity", 1)
})
.on("mouseleave", function (d) { //as mouse leaves, provide transition back to arcOver
d3.select(this).transition()
.attr("d", arc)
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("opacity", 1);
})
console.log("hi3");
svg.selectAll('text')
.data(pie(dataset))
.enter()
.append('text')
.attr("transform", function (d) { //add value at centroid of each arc
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d.value;
})
.style("pointer-events", "none");
var legend = svg.selectAll('.legend') //create a legend ->set of colour boxes
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var vert = i * height - offset;
return 'translate(' + 250 + ',' + vert + ')';
});
console.log("hi4");
legend.append('rect') //append legend in the form of rectangle
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text') //append text into legend
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d; });
console.log("hi5");
}
, 500);
});
</script>
</body>
</html>
答案 0 :(得分：0)
我无法正确满足您的要求......但我认为，
您可以在点击按钮时根据数据库中的数据绘制饼图。
为此，
点击按钮进行服务器调用。
在服务器端从数据库检索数据并将数据发送回客户端。
在客户端根据此数据绘制图表。
我希望这对你有所帮助。