![](/img/trans.png)
[英]Node.js/jade — How can I pass mysql data as a local variable into inline javascript?
[英]How do I pass MySQL data on Fusion Chart using JavaScript and Node.Js?
这里我上传了两张截图。 我想在这个仪表中显示 MySQL 数据。 我使用 JavaScript 和 Node.Js 来连接 MySQL 数据库。
融合图代码
<script type="text/javascript">
let fusionCharts= document.querySelector('#chart-container')
FusionCharts.ready(function() {
var fusionCharts = new FusionCharts("chart-container",{
"type": "angulargauge",
"renderAt": "chart-container",
"width": "450",
"height": "250",
"dataFormat": "json",
"dataSource": {
// Chart Configuration
"chart": {
"caption": "",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"numberSuffix": "%",
"theme": "fusion",
"showToolTip": "0"
},
// Chart Data
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#F2726F"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#FFC533"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#62B58F"
}]
},
"dials": {
"dial": [{
"value": "80",
}]
}
}
});
fusionCharts.render();
});
如何用 MySQL 数据替换图表值('80')。
MySQL 数据库连接代码
const mysql=require("mysql");
const express=require("express");
const bodyParser=require("body-parser");
var app=express();
app.use(bodyParser.json());
var mysqlConnection=mysql.createConnection({
host: "localhost",
port: 3306,
user: "username",
database: "mydb",
password: "password",
});
mysqlConnection.connect((err)=>{
if (!err){
console.log("Wow! Connection Established");
}
else{
console.log("Opps! Connection Failed");
}
});
mysqlConnection.connect(function(err){
if (!err);
mysqlConnection.query("SELECT Temperature FROM ISL201 ORDER BY ISL201.Timestamp DESC", function(err, results){
if (!err);
console.log(results);
});
});
这是您可以使用上述技术渲染 FusionCharts 的片段
服务器.js
const mysql = require("mysql");
const express = require("express");
const bodyparser = require("body-parser");
const path = require("path");
var app = express();
//Configuring express server
app.use(bodyparser.json());
//MySQL details
var mysqlConnection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "fusioncharts_jspsample",
multipleStatements: true
});
mysqlConnection.connect(err => {
if (!err) console.log("Connection Established Successfully");
else console.log("Connection Failed!" + JSON.stringify(err, undefined, 2));
});
//Establish the server connection
//PORT ENVIRONMENT VARIABLE
const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`Listening on port ${port}..`));
app.use(express.static("public"));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname + "/index.html"));
});
app.get("/api/number_of_visitor/:id", (req, res) => {
mysqlConnection.query(
"SELECT * FROM number_of_visitor WHERE id = ?",
[req.params.id],
(err, rows, fields) => {
if (!err) {
res.json(rows);
} else console.log(err);
}
);
});
客户端片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
<h1>Angular Gauge</h1>
<script type="text/javascript">
async function fetchData(id = 1) {
const { data } = await axios.get(
`http://localhost:8080/api/number_of_visitor/${id}`
);
return data;
}
Promise.all([fetchData()]).then(v => {
console.log(v);
let val = v[0][0].bakersfield_central;
const ds = {
chart: {
caption: "Customer Satisfaction Score",
subcaption: "Last week",
lowerLimit: "0",
upperLimit: "22500",
lowerLimitDisplay: "Bad",
upperLimitDisplay: "Good",
showValue: "1",
valueBelowPivot: "1",
theme: "fusion"
},
colorRange: {
color: [
{
minValue: "0",
maxValue: "7500",
code: "#e44a00"
},
{
minValue: "7500",
maxValue: "15000",
code: "#f8bd19"
},
{
minValue: "15000",
maxValue: "22500",
code: "#6baa01"
}
]
},
dials: {
dial: [
{
value: val
}
]
}
};
FusionCharts.ready(function() {
var cSatScoreChart = new FusionCharts({
type: "angulargauge",
renderAt: "container",
width: "400",
height: "250",
dataFormat: "json",
dataSource: ds
}).render();
});
});
</script>
<div id="container"></div>
使用 POSTMAN 来处理请求。
如果您仍然遇到问题,这里有一个演示(包括 SQL 文件) - https://www.dropbox.com/s/6am59m3cemfslat/database_demo.zip?dl=0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.