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

Posted cddehsy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化数据相关的知识，希望对你有一定的参考价值。

  1. Download Chart.js
    你可以Chart.js从这封信中：https://github.com/chartjs/Chart.js/releases
  2. 使用VisualStudio创建新的ASP.NET项目并复制Chart.js在上一步中下载到root项目。
  3. 创建一个名为“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>
  4. 打开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>
  5. 切换到代码视图并开始编写一些代码： 
    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;
            }            
        }
  6. 构建项目并运行以显示结果。

以上是关于使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化数据的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET Core ---- 系列文章

ASP.NET_基础

ASP.NET 和 SQL Server 2008 中的错误“用户 'NT AUTHORITY\IUSR' 登录失败”

ASP.NET Core与ASP.NET区别

在 ASP.NET Core 应用程序中使用多个 HttpClient 对象

ASP.NET Core Web API 身份验证