如何在线条图中添加下拉列表，以便在chartJS web应用程序中使用ASP.NET更改

Question

我正在开发一个使用ASP.NET web应用程序模板的web应用程序仪表板。

当前应用程序连接到SQL服务器。为了实现可视化，我使用了chart.JS线图。

为了给你一些背景，我有过去两年的数据，关于温度和引擎的时间，需要在一个线图中可视化，但是我希望用户通过添加一个下拉列表在仪表板上有更多的控制，这样他们就可以选择从上一个24小时，7天，1个月，6个月等等的数据。

使用chartJS，我只能做一个线图，但我无法实现下拉列表，因此，我将非常感谢的建议和帮助，以解决这个问题，我已经处理了一段时间。

Dashboard.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using FusionCharts.DataEngine;
using FusionCharts.Visualization;
using Newtonsoft.Json;
using System.Web.Services;
using System.Web.Script.Services;
using System.Text;

namespace SW53400206
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        private int[] data;

        public ChartJsDataModel Model { get; set; }
        public ChartJsDataModel Model2 { get; set; }
        public ChartJsDataModel Model3 { get; set; }
        public ChartJsDataModel Model4 { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                ShowData();

        }
       
        private void ShowData()
        {
            //Connect to the SQL server
            string myConnection = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;
            SqlConnection con = new SqlConnection(myConnection);
            String query = "SELECT* FROM DADLoggerTable";
            SqlCommand cmd = new SqlCommand(query, con);
            DataTable tb = new DataTable();
            StringBuilder str = new StringBuilder();

            try
            {
                con.Open();

                SqlDataReader dr = cmd.ExecuteReader();
                tb.Load(dr, LoadOption.OverwriteChanges);
                con.Close();
            }
            catch { }
            //Check if there is data in the datatable
            if (tb != null)
            {
                //Specify chart type
                String chart = "";
                chart = "<canvas id=\"line-chart\" width=\"120%\" height=\"30\"></canvas>";
                chart += "<script>";
                chart += "new Chart(document.getElementById(\"line-chart\"), { type: 'line', data: {labels: [";

                // A line chart for engine hours
                for (int i = 0; i < tb.Rows.Count; i++)
                    chart += i.ToString() + ",";
                chart = chart.Substring(0, chart.Length - 1);

                chart += "],datasets: [{ data: [";

                //Select data from the database and add to chart
                String value = "";
                for (int i = 0; i < tb.Rows.Count; i++)
                    value += tb.Rows[i]["Engine_Hours"].ToString() + ",";
                value = value.Substring(0, value.Length - 1);
                chart += value;

                chart += "],label: \"Engine Hours\",borderColor: \"#4287f5\",fill: true}"; // Chart color
                chart += "]},options: { title: { display: false,text: 'Engine Hours (hr)'} }"; // Chart title
                chart += "});";
                chart += "</script>";

                //Render the chart
                Literal1.Text = chart;


                // A line chart for methane value
                String Linechart = "";
                Linechart = "<canvas id=\"bubble-chart\" width=\"120%\" height=\"30\"></canvas>";
                Linechart += "<script>";
                Linechart += "new Chart(document.getElementById(\"bubble-chart\"), { type: 'line', data: {labels: [";


                //Select the first 460 data points5
                for (int i = 0; i < tb.Rows.Count; i++)
                    Linechart += i.ToString() + ",";
                Linechart = Linechart.Substring(0, Linechart.Length - 1);

                Linechart += "],datasets: [{ data: [";

                //Select data from the database and add to chart
                String value2 = "";
                for (int i = 0; i < tb.Rows.Count; i++)
                    value2 += tb.Rows[i]["Methane_Value"].ToString() + ",";
                value2 = value2.Substring(0, value2.Length - 1);
                Linechart += value2;

                Linechart += "],label: \"Methane_Value\",borderColor: \"#eff542\",fill: true}"; // Chart color
                Linechart += "]},options: { title: { display: false,text: 'Methane_Value'} }"; // Chart title
                Linechart += "});";
                Linechart += "</script>";

                //Render the chart
                Literal2.Text = Linechart;

        
                 // A line chart for T1
                String barchart = "";
                barchart = "<canvas id=\"bar-chart\" width=\"120%\" height=\"30\"></canvas>";
                barchart += "<script>";
                barchart += "new Chart(document.getElementById(\"bar-chart\"), { type: 'line', data: {labels: [";


                //Select the first 460 data points
                for (int i = 0; i < tb.Rows.Count; i++)
                    barchart += i.ToString() + ",";
                barchart = barchart.Substring(0, barchart.Length - 1);

                barchart += "],datasets: [{ data: [";

                //Select data from the database and add to chart
                String value3 = "";
                for (int i = 0; i < tb.Rows.Count; i++)
                    value3 += tb.Rows[i]["T1"].ToString() + ",";
                value3 = value3.Substring(0, value3.Length - 1);
                barchart += value3;

                barchart += "],label: \"T1 (Celsius)\",borderColor: \"#4bf542\",fill: true}"; // Chart color
                barchart += "]},options: { title: { display: false,text: 'T1 (Celsius)'} }"; // Chart title
                barchart += "});";
                barchart += "</script>";

                //Render the chart
                Literal3.Text = barchart;
              }
         }
    }
}

Dashboard.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dashboard.aspx.cs" Inherits="SW53400206.WebForm1" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">

       <table align="center">
        <tr valign="top">
        <td style="width: 50%;">
        <div style="width:1000px;"><asp:Literal ID="Literal1" runat="server"></asp:Literal></div>
        </td>
        <td style="width: 50%;">
        <div><asp:Literal ID="Literal2" runat="server"></asp:Literal> </div>
        </td>  
       </tr>
        </table>

       <table align="center">
        <tr valign="top">
        <td style="width: 50%;">
        <div style="width:1000px;"><asp:Literal ID="Literal3" runat="server"></asp:Literal></div>
        </td>
       </tr>
        </table>

</form>
</body>
</html>

这就是使用以下代码绘制的线条图的样子：

​

Answer 1

您需要在表单标签中添加"Dashboard.aspx“，添加带有"AutoPostBack”和事件的下拉列表控件。

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack = "true" OnSelectedIndexChanged = "OnSelectedIndexChanged" >  
            <asp:ListItem Value="0">Please Select</asp:ListItem>
            <asp:ListItem Value="1">last 24 hours</asp:ListItem>
            <asp:ListItem Value="2">7 days</asp:ListItem>
            <asp:ListItem Value="3">1 month</asp:ListItem>
            <asp:ListItem Value="4">6 months</asp:ListItem>
        </asp:DropDownList>

然后.cs页面代码需要修改

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    string message = DropDownList1.SelectedItem.Text + " - " + DropDownList1.SelectedItem.Value;
}

再次使用选中的下拉列表选项调用"ShowData()“函数。