首页 > 编程入门 文章详情

通过html查询javascript(querying javascript through html)

编程入门 行业动态 更新时间:2024-10-28 08:31:12
通过html查询javascript(querying javascript through html)

我有.js文件和.html文件，我希望html文档从.js文件中获取数据并操纵它以生成饼图。 我该怎么办呢？

目前，我在.js文件中有一个函数。 我想在html命令中调用它。

编辑：我已经在html中准备好了图表，并在js中查询了数据库。 我留下链接他们。 我想根据mssql数据库中的数据值显示饼图

这是我的html文件index12.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></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="ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js></script> <script src="d3/d3.js"></script> <select id ="slctmodel"></select> <script> var dataset; $(document).ready(function () { $.getJSON("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; var height = 1500; var radius = 150; var legendRectSize = 16; var legendSpacing = 4; console.log("hi1"); var color = d3.scale.ordinal() .domain(["A", "B", "C", "D", "E", "F", "G", ]) .range(["#FFEBAA", "#EEAB79", "#955C52", "#BE4C60", "#B42E61", "#851362", "#5E0063"]); var svg = d3.select('#chart') .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + 850 + ',' + 250+')'); d3.select('#chart svg') .append("text") .attr("x", 850) .attr("y", 30) .attr("text-anchor", "middle") .text("PROBABILITY OF FAILURE IN MODULES"); var arc = d3.svg.arc() .innerRadius(30) .outerRadius(radius); var arcOver = d3.svg.arc() .innerRadius(20) .outerRadius(radius + 30); console.log("hi2"); var pie = d3.layout.pie() .value(function (d) { return d.errors; }) .sort(null); var path = svg.selectAll('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) { d3.select(this) .attr("stroke", "black") .transition() .duration(1000) .attr("d", arcOver) .attr("stroke-width", 4) .attr("opacity", 1) }) .on("mouseleave", function (d) { 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) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function (d) { return d.value; }) .style("pointer-events", "none"); var legend = svg.selectAll('.legend') .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') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', color) .style('stroke', color); legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(function (d) { return d; }); console.log("hi5"); } , 500); }); </script> </body> </html>

和我的APP.JS文件是

var http = require('http'); //connect with 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 } var Connection = sql.Connection; var Request = sql.Request; var a; var recordSet; var config = { server: '10.2.13.211', //my IP address - obtained //server: '.', database: 'trialdb', //my table is within this user: 'sa', //windows authentication password: 'admin123#', port: 1433 //deafault port number }; function send404Response(response) { response.writeHead(404, { "Context-Type": "text/plain" }); response.write("Error 404:Page not found"); response.end(); } function loadEmployees() { var dbConn = new sql.Connection(config); dbConn.connect().then(function () { var request = new sql.Request(dbConn); request.query("select * from list").then(function (recordSet) { // 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')); //res.send(recordSet); }); 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); console.log('server will run on requset to port 8888'); var server = app.listen(8081);

index12.html文件的jquery部分中的'data'变量有一个未定义的值。它应该在app.js文件中有'recordSet'变量的值

我该如何处理？

如何在index12.html中调用app.js的函数loadEmployees（），以便我可以存储函数loadEmployees（）返回的值，即index12.html的'data'变量中的'recordSet'

I have a .js file and a .html file, I want the html document to get data from the .js file and manipulate it to produce a pie chart. How should I proceed with it?

Currently, I have a function in the .js file . I would like to call it from within html command.

EDIT: I have the charts ready in html and have queried the database in js. I am left with linking them. I want to display a pie charts based on data values in mssql database

This is my html file index12.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></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="ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js></script> <script src="d3/d3.js"></script> <select id ="slctmodel"></select> <script> var dataset; $(document).ready(function () { $.getJSON("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; var height = 1500; var radius = 150; var legendRectSize = 16; var legendSpacing = 4; console.log("hi1"); var color = d3.scale.ordinal() .domain(["A", "B", "C", "D", "E", "F", "G", ]) .range(["#FFEBAA", "#EEAB79", "#955C52", "#BE4C60", "#B42E61", "#851362", "#5E0063"]); var svg = d3.select('#chart') .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + 850 + ',' + 250+')'); d3.select('#chart svg') .append("text") .attr("x", 850) .attr("y", 30) .attr("text-anchor", "middle") .text("PROBABILITY OF FAILURE IN MODULES"); var arc = d3.svg.arc() .innerRadius(30) .outerRadius(radius); var arcOver = d3.svg.arc() .innerRadius(20) .outerRadius(radius + 30); console.log("hi2"); var pie = d3.layout.pie() .value(function (d) { return d.errors; }) .sort(null); var path = svg.selectAll('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) { d3.select(this) .attr("stroke", "black") .transition() .duration(1000) .attr("d", arcOver) .attr("stroke-width", 4) .attr("opacity", 1) }) .on("mouseleave", function (d) { 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) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function (d) { return d.value; }) .style("pointer-events", "none"); var legend = svg.selectAll('.legend') .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') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', color) .style('stroke', color); legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(function (d) { return d; }); console.log("hi5"); } , 500); }); </script> </body> </html>

AND MY APP.JS FILE IS

var http = require('http'); //connect with 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 } var Connection = sql.Connection; var Request = sql.Request; var a; var recordSet; var config = { server: '10.2.13.211', //my IP address - obtained //server: '.', database: 'trialdb', //my table is within this user: 'sa', //windows authentication password: 'admin123#', port: 1433 //deafault port number }; function send404Response(response) { response.writeHead(404, { "Context-Type": "text/plain" }); response.write("Error 404:Page not found"); response.end(); } function loadEmployees() { var dbConn = new sql.Connection(config); dbConn.connect().then(function () { var request = new sql.Request(dbConn); request.query("select * from list").then(function (recordSet) { // 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')); //res.send(recordSet); }); 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); console.log('server will run on requset to port 8888'); var server = app.listen(8081);

My 'data' variable in the jquery part of index12.html file has an undefined value.It should have the value of 'recordSet' variable in the app.js file

How do I proceed with it?

How do I call the function loadEmployees() of app.js in index12.html so that I can store the value returned by the function loadEmployees() i.e, the 'recordSet' in the 'data' variable of index12.html

最满意答案

使用chart.js库在html上创建图表。

参考http://www.chartjs.org/

Use chart.js library to create charts on html.

refer http://www.chartjs.org/

更多推荐

本文发布于:2023-08-07 11:20:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1464173.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：html   javascript   querying

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表