JQuery 折线图的 X 轴在 ASP.NET、C#、SQL Server 中不显示

Posted 2023-04-13

【中文标题】JQuery 折线图的 X 轴在 ASP.NET、C#、SQL Server 中不显示

【英文标题】：JQuery Line Chart's X Axis not display in ASP.NET, C#, SQL Server

【发布时间】：2021-08-11 13:40:36

【问题描述】：

我有一个 SQL Server 数据库表，我想在 jQuery 折线图中显示该记录。我尝试了更多时间在图表中显示我的数据。但是那个asp页面加载成功，没有查看图表。

我的aspx标记如下：

<form id="form1" runat="server">
<div>
  <asp:Literal ID="ltChart" runat="server"></asp:Literal>
</div>
</form>

我的aspx.cs后面的代码是这样的：

protected void Page_Load(object sender, EventArgs e)

    if (!IsPostBack)
        ShowData();


private void ShowData()

    String myConnection = ConfigurationManager.ConnectionStrings["FFASDBConnectionString"].ToString();

    SqlConnection con = new SqlConnection(myConnection);

    String query = "SELECT TOP 10 [temperature],[dateTime] FROM [FFAS].[dbo].[ForestFireDataset] ORDER BY [dateTime] DESC";

    SqlCommand cmd = new SqlCommand(query, con);

    DataTable tb = new DataTable();

    try
    
        con.Open();

        SqlDataReader dr = cmd.ExecuteReader();
        tb.Load(dr, LoadOption.OverwriteChanges);

        con.Close();
    
    catch  

    if (tb != null)
    
        String chart = "";
        chart = "<canvas id=\"line-chart\" width=\"100%\" height=\"40\"></canvas>";
        chart += "<script>";
        chart += "new Chart(document.getElementById(\"line-chart\"),  type: 'line', data: labels: [";

        string valueX = "";

        for (int i = 0; i < tb.Rows.Count; i++)
            valueX += tb.Rows[i]["dateTime"].ToString() + ",";

        chart += valueX;

        chart += "],datasets: [ data: [";

        // get data from database and add to chart
        String value = "";

        for (int i = 0; i < tb.Rows.Count; i++)
            value += tb.Rows[i]["temperature"].ToString() + ",";

        value = value.Substring(0, value.Length - 1);
        chart += value;

        chart += "],label: \"Air Temperature\",borderColor: \"#3e95cd\",fill: true"; // Chart color
        chart += "],options:  title:  display: true,text: 'Air Temperature (oC)' "; // Chart title
        chart += ");";
        chart += "</script>";

        ltChart.Text = chart;
    

【参考方案1】：

ltChart.Text 只更新文本，不更新 html。从

更改您的标记

<div>
  <asp:Literal ID="ltChart" runat="server"></asp:Literal>
</div>

到

<div id='ltChart' runat='server'></div>

然后，您将使用ltChart.InnerHtml（更多信息here）代替ltChart.Text。

ASP.NET 网络表单已经过时，所以如果是新应用程序，最好使用 MVC 或 Blazor。