javascript - 我需要从服务器发送日期数据，然后使用 Google Charts 中使用的 google.visualization.datatable 中的日期过滤元素

Question

我正在我的 aspx.cs 代码中检索日期时间和其他数据，以便使用 Google Charts 制作图表，然后使用此代码将其发送到客户端代码

public static List<DataDB> GetData()
{
    SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DBPieChartConnectionString"].ConnectionString);
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    conn.Open();
    string cmdstr = "SELECT * from DateData";
    SqlCommand cmd = new SqlCommand(cmdstr, conn);
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    adp.Fill(ds);
    dt = ds.Tables[0];
    List<DataDB> dataList = new List<DataDB>();
    int ok = 0, er = 0, tot = 0;
    DateTime datetime;
    foreach (DataRow dr in dt.Rows)
    {
        datetime = (DateTime)dr[0];
        ok = Convert.ToInt32(dr[1]);
        er = Convert.ToInt32(dr[2]);
        tot = Convert.ToInt32(dr[3]);
        dataList.Add(new DataDB(datetime, date, ok, er, tot));
    }
    return dataList;
}


[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetChartData()
{
    List<DataDB> data = GetData();

    var chartData = new object[data.Count + 1];
    chartData[0] = new object[]{
            "Info",
            "Ok Records",
            "Errored Records",
            "Total Records"
        };

    int j = 0;
    foreach (var i in data)
    {
        j++;
        DateTime datetime = i.dt;
        chartData[j] = new object[] { datetime, i.OkRec, i.ErRec, i.TotRec};
    }
    return chartData;
}

并使用此类

public class DataDb
{
    public int OkRec = 0;
    public int ErRec = 0;
    public int TotRec = 0;
    public DateTime dt;
    public DataDB(DateTime dt, int OkRec, int ErRec, int TotRec)
    {
        this.dt = dt;
        this.OkRec = OkRec;
        this.ErRec = ErRec;
        this.TotRec = TotRec;
    }
}

然后我使用这个代码是我的 aspx 即客户端代码来检索数据并填充谷歌图表的数据

var chartData;
$.ajax({
        url: "Default2.aspx/GetChartData",
        data: "",
        dataType: "json",
        type: "POST",
        contentType: "application/json; chartset=utf-8",
        success: function (data) {
            chartData = data.d;
        },
        error: function () {
        alert("Error loading data! Please try again.");
        }
        }).done(function () {
        google.charts.setOnLoadCallback(drawChart);
        });
    });

function drawChart() {
    var data = google.visualization.arrayToDataTable(chartData);
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data);
}

现在，当我运行此代码时，它没有显示正确的日期值，并且我无法使用 minValue 和 maxValue 根据数据进行过滤，因为它需要以下格式的日期值:new Date(2000, 8, 5)如谷歌文档中给出的。那么有没有解决这个问题的方法，以便我可以根据日期值过滤数据。

Answer 1

所以经过漫长的一天，我能够通过明确给出 minValue 和 maxValue 来解决它。因此，如果有人知道如何通过下拉列表或其他方式从用户那里获取它，那么它将很有用。

在此代码中，我调用函数 GetData，然后在客户端而不是服务器端填充数据表。

function drawChart() {
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Default2.aspx/GetData',
                data: '{}',
                success:
                function (response) {
                    drawVisualization(response.d);
                }
            });
        })

        function drawVisualization(dataValues) {
    if (dataValues.length < 1)
        return;

    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Date');
    data.addColumn('number', 'Ok');
    data.addColumn('number', 'Error');
    data.addColumn('number', 'Total');

    for (var i = 0; i < dataValues.length; i++) {

        var date = new Date(parseInt(dataValues[i].dt.substr(6), 10));

        data.addRow([date, dataValues[i].OkRec, dataValues[i].ErRec, dataValues[i].TotRec]);
    }
 var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([{
            column: 0,
            minValue: new Date(2016, 0, 1, 0, 0, 0),
            maxValue: new Date(2017, 12, 12, 23, 59, 59)
        }]));

        var container = document.getElementById('chart_div');
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(view, options);
}