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

【问题标题】：JQuery Line Chart's X Axis not display in ASP.NET, C#, SQL ServerJQuery 折线图的 X 轴在 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;
    }
}

【问题讨论】：

标签： c# jquery asp.net sql-server chart.js

【解决方案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。

【讨论】：