asp-经典，带有 javascript 图表
asp-classic with a javascript chart
考虑以下 JS 图表（取自免费 bootstrap 入门模板）
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
datasets: [{
label: "Sessions",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
min: 0,
max: 40000,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
我想做的是将一个 asp-变量传递给这个图表，我天真地认为我可以建立一个 sql-服务器连接，如下所示：
<%
'--------------------------------------------------------------------------------------------
' Declare variables
'--------------------------------------------------------------------------------------------
Dim gobjConn
Dim gsConnect
Dim gsSQL
'--------------------------------------------------------------------------------------------
' Open database connection
'--------------------------------------------------------------------------------------------
gsConnect = "Driver={SQL Server};Server ;Database=mydB;Uid=UserName;Pwd=myPW;"
Set gobjConn = Server.CreateObject("ADODB.Connection")
gobjConn.Open gsConnect
gsSQL = "SELECT Sales, Week from Sales"
%>
我可以将 Store & sales 传递给上面的数据标签（分别是 x 和 y 轴），但是在我的 JS 文件中添加任何 asp 都会导致页面无法加载图表。
任何建议都很好。
很高兴走另一条路，这更多是为了学习（限于asp-我工作单位的经典）
在 JS 文件中执行 ASP 代码是不可能的，除非您为 .js 文件添加自定义处理程序映射，使它们表现为 .asp 文件。您可以做的是在您的父 asp 页面中生成数据并将值分配为全局 javascript 变量，这些变量可以被您的外部图表 JS 文件读取。
未经测试，但类似这样：
<%
'--------------------------------------------------------------------------------------------
' Declare variables
'--------------------------------------------------------------------------------------------
Dim gobjConn
Dim gobjRS
Dim gsConnect
Dim gsSQL
Dim gsData
Dim gsLoop
Dim chartLabels
Dim chartSales
'--------------------------------------------------------------------------------------------
' Open database connection
'--------------------------------------------------------------------------------------------
gsConnect = "Driver={SQL Server};Server ;Database=mydB;Uid=hal03df;Pwd=myPW;"
Set gobjConn = Server.CreateObject("ADODB.Connection")
Set gobjRS = Server.CreateObject("ADODB.Recordset")
gobjConn.Open(gsConnect)
gobjRS.open "SELECT Sales, Week FROM Sales ORDER BY Week ASC",gobjConn
' check the recordset contains data
if NOT gobjRS.EOF then
' convert the recordset to a 2d array
gsData = gobjRS.getRows()
' loop through the recordset array
for gsLoop = 0 to uBound(gsData,2)
' convert the week value to a date variable
gsData(1,gsLoop) = cDate(gsData(1,gsLoop))
' build the chart labels
chartLabels = chartLabels & """" &_
MonthName(Month(gsData(1,gsLoop)),True) & " " & Day(gsData(1,gsLoop)) & """"
' build the sales labels
chartSales = chartSales & gsData(0,gsLoop)
' add a trailing comma?
if NOT gsLoop = uBound(gsData,2) then
chartLabels = chartLabels & ", "
chartSales = chartSales & ", "
end if
next
else
' No sales data
end if
gobjRS.close
gobjConn.close
set gobjRS = nothing
set gobjConn = nothing
%><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script language="javascript">
// assign the asp chartLabels/chartSales variables as global javascript arrays
var chartLabels = [<%=chartLabels%>];
var chartSales = [<%=chartSales%>];
</script>
<script language="javascript" src="path/to/charts/js/file"></script>
</body>
</html>
一个小的替代方法是在您的 SQL 中执行组连接，这将消除循环遍历记录集的需要。虽然我对SQL服务器的了解不是很好，所以我不知道该怎么做。
在您的图表 JS 文件中：
<script language="javascript">
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartLabels,
datasets: [{
label: "Sessions",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: chartSales
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
min: 0,
max: 40000,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
</script>
考虑以下 JS 图表（取自免费 bootstrap 入门模板）
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
datasets: [{
label: "Sessions",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
min: 0,
max: 40000,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
我想做的是将一个 asp-变量传递给这个图表，我天真地认为我可以建立一个 sql-服务器连接，如下所示：
<%
'--------------------------------------------------------------------------------------------
' Declare variables
'--------------------------------------------------------------------------------------------
Dim gobjConn
Dim gsConnect
Dim gsSQL
'--------------------------------------------------------------------------------------------
' Open database connection
'--------------------------------------------------------------------------------------------
gsConnect = "Driver={SQL Server};Server ;Database=mydB;Uid=UserName;Pwd=myPW;"
Set gobjConn = Server.CreateObject("ADODB.Connection")
gobjConn.Open gsConnect
gsSQL = "SELECT Sales, Week from Sales"
%>
我可以将 Store & sales 传递给上面的数据标签（分别是 x 和 y 轴），但是在我的 JS 文件中添加任何 asp 都会导致页面无法加载图表。
任何建议都很好。
很高兴走另一条路，这更多是为了学习（限于asp-我工作单位的经典）
在 JS 文件中执行 ASP 代码是不可能的，除非您为 .js 文件添加自定义处理程序映射，使它们表现为 .asp 文件。您可以做的是在您的父 asp 页面中生成数据并将值分配为全局 javascript 变量，这些变量可以被您的外部图表 JS 文件读取。
未经测试，但类似这样：
<%
'--------------------------------------------------------------------------------------------
' Declare variables
'--------------------------------------------------------------------------------------------
Dim gobjConn
Dim gobjRS
Dim gsConnect
Dim gsSQL
Dim gsData
Dim gsLoop
Dim chartLabels
Dim chartSales
'--------------------------------------------------------------------------------------------
' Open database connection
'--------------------------------------------------------------------------------------------
gsConnect = "Driver={SQL Server};Server ;Database=mydB;Uid=hal03df;Pwd=myPW;"
Set gobjConn = Server.CreateObject("ADODB.Connection")
Set gobjRS = Server.CreateObject("ADODB.Recordset")
gobjConn.Open(gsConnect)
gobjRS.open "SELECT Sales, Week FROM Sales ORDER BY Week ASC",gobjConn
' check the recordset contains data
if NOT gobjRS.EOF then
' convert the recordset to a 2d array
gsData = gobjRS.getRows()
' loop through the recordset array
for gsLoop = 0 to uBound(gsData,2)
' convert the week value to a date variable
gsData(1,gsLoop) = cDate(gsData(1,gsLoop))
' build the chart labels
chartLabels = chartLabels & """" &_
MonthName(Month(gsData(1,gsLoop)),True) & " " & Day(gsData(1,gsLoop)) & """"
' build the sales labels
chartSales = chartSales & gsData(0,gsLoop)
' add a trailing comma?
if NOT gsLoop = uBound(gsData,2) then
chartLabels = chartLabels & ", "
chartSales = chartSales & ", "
end if
next
else
' No sales data
end if
gobjRS.close
gobjConn.close
set gobjRS = nothing
set gobjConn = nothing
%><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script language="javascript">
// assign the asp chartLabels/chartSales variables as global javascript arrays
var chartLabels = [<%=chartLabels%>];
var chartSales = [<%=chartSales%>];
</script>
<script language="javascript" src="path/to/charts/js/file"></script>
</body>
</html>
一个小的替代方法是在您的 SQL 中执行组连接，这将消除循环遍历记录集的需要。虽然我对SQL服务器的了解不是很好，所以我不知道该怎么做。
在您的图表 JS 文件中：
<script language="javascript">
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartLabels,
datasets: [{
label: "Sessions",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: chartSales
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
min: 0,
max: 40000,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
</script>