使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用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; } }

构建项目并运行以显示结果。

使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化数据

猜你喜欢