我需要从服务器发送日期数据，然后使用Google图表中使用的google.visualization.datatable

Question

我正在检索aspx中的datetime和其他数据.cs用于使用Google图表制作图表的代码，然后使用此代码将其发送到客户端代码

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根据数据进行过滤，因为它需要以下格式的日期值：Google文档中给出的新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);
}