- 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的可视化数据
原文地址：https://www.cnblogs.com/cddehsy/p/9613264.html