溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
向一些人介紹一些信息的最好方法是使用圖表。ASP.NET有圖表控件，但它并不是性能最好的控件。Chart.js是個很好的理想。
Download Chart.js
你可以Chart.js從這封信中：https://github.com/chartjs/Chart.js/releases
使用VisualStudio創(chuàng)建新的ASP.NET項目并復制Chart.js在上一步中下載到root項目。
創(chuàng)建一個名為“Home.aspx“并添加如下代碼行：藏 復制碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="VisualData.Home" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="ChartJS.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:Literal ID="ltChart" runat="server"></asp:Literal> </div> </form> </body> </html>
打開Web.config文件以添加新連接。string若要連接到MS SQL Server數據庫，請執(zhí)行以下操作：藏 復制碼
<configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> </system.web> <connectionStrings> <add name="myConnection" connectionString="Data Source=.\mySQLInstance; initial catalog=myDatabaseName; user id=myUsername; password=myPassword;"/> </connectionStrings> </configuration>
切換到代碼視圖并開始編寫一些代碼：藏 收縮 
復制碼
private void ShowData() { String myConnection = ConfigurationManager.ConnectionStrings["myConnection"].ToString(); SqlConnection con = new SqlConnection(myConnection); String query = "Select top 100 AirTemperature From tbWeathers Where stationID=1 order by id 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 = ""; // You can change your chart height by modify height value chart = "<canvas id=\"line-chart\" width=\"100%\" height=\"40\"></canvas>"; chart += "<script>"; chart += "new Chart(document.getElementById(\"line-chart\"), { type: 'line', data: {labels: ["; // more details in x-axis for (int i = 0; i < 100; i++) chart += i.ToString() + ","; chart = chart.Substring(0, chart.Length - 1); chart += "],datasets: [{ data: ["; // put data from database to chart String value = ""; for (int i = 0; i < tb.Rows.Count; i++) value += tb.Rows[i]["NhietDo"].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; } }構建項目并運行以顯示結果。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
