javascript - 带有 javascript 图表的 asp-classic

Question

考虑以下 JS 图表（取自免费的引导程序入门模板）

   // 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-server 连接，如下所示：

<%
'--------------------------------------------------------------------------------------------
'  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-classic）

标签： javascriptasp-classic

Answer 1

在 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 中执行组 concat，这将消除循环遍历记录集的需要。虽然我对 SQL Server 的了解不是很好，所以我不知道如何临时做到这一点。

在您的图表 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>