向一些人介绍一些信息的最好方法是使用图表。ASP.NET有图表控件，但它并不是性能最好的控件。Chart.js是个很好的理想。
使用“守则”
Download Chart.js
你可以Chart.js从这封信中：https://github.com/chartjs/Chart.js/releases使用VisualStudio创建新的ASP.NET项目并复制Chart.js在上一步中下载到root项目。
创建一个名为“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数据库，请执行以下操作：藏 复制码<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; } }构建项目并运行以显示结果。