如何正确地将Google时间轴图表与Ajax/JSON请求绑定

Question

我正在尝试使用 Google Charts 制作时间线图表，但遇到了一些问题，我将在下面详细说明。

我从一个非常简单的示例开始，然后尝试将其转换为使用 Ajax 调用来填充图表。

首先，我使用了一个简单的实现，其中包含硬编码的单行数据，效果很好。

google.charts.load("current", { packages: ["timeline"] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var container = document.getElementById('CurrentOrders');
        var chart = new google.visualization.Timeline(container);
        var data = new google.visualization.DataTable();
        data.addColumn({ id: 'OrderNum', label: 'Order Number', type: 'string' });
        data.addColumn({ id: 'PN', label: 'Part Number', type: 'string' });
        data.addColumn({ id: 'StartDate', label: 'Start', type: 'date' });
        data.addColumn({ id: 'EndDate', label: 'End', type: 'date' });
        
        data.addRows([                
            ['M12345', 'MyPartNumber', new Date(2023, 1, 4), new Date(2023, 1, 6)]
        ]);
            var options = {
            timeline: {
                groupByRowLabel: true
            }
        };
        chart.draw(data, options);
    }

接下来我创建了一个返回相同数据集的 Webmethod。

<System.Web.Services.WebMethod>
Public Shared Function GetOrders() As String

    Dim mOrder As List(Of Morder) = New List(Of Morder)()
    Dim constr As String = ConfigurationManager.ConnectionStrings("HYDMCS").ConnectionString
    Dim Query As String = "SELECT TOP(1) OrderNumber,Part_Number, CONVERT(DATE,GETDATE()) AS StartDate, CONVERT(DATE,DATEADD(DAY,2,GETDATE())) AS EndDate, MfgDueDate FROM HYD_GP_ProductionSchedule ORDER BY Part_Number DESC "
    Using con As New SqlConnection(constr)
        Try
            con.Open()
            Using sqlCmd As SqlCommand = New SqlCommand(Query, con)
                Using reader As SqlDataReader = sqlCmd.ExecuteReader
                    While reader.Read
                        If reader.HasRows Then
                            mOrder.Add(New Morder() With {
                                .OrderNum = reader(0).ToString(),
                                .PN = reader(1).ToString(),
                                .StartDate = reader(2),
                                .EndDate = reader(3)
                            })
                        End If
                    End While
                End Using
            End Using
            con.Close()
        Catch ex As Exception
            If con.State = ConnectionState.Open Then
                con.Close()
            End If
        End Try
    End Using
    Dim js As JavaScriptSerializer = New JavaScriptSerializer()
    Return js.Serialize(mOrder)
End Function

它返回预期的结果。

[{"OrderNum":"M531270","PN":"VXLD0500510 C","StartDate":"/日期(1704344400000)/","EndDate":"/日期(1704517200000)/"}]

但是，当尝试使用结果时，我遇到了几个问题。 首先是代码。

 google.charts.load("current", { packages: ["timeline"] });
    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax(
            {
                type: 'POST',
                dataType: 'JSON',
                contentType: 'application/json',
                url: 'PlannersWorkBench.aspx/GetOrders',
                success:
                    function (response) {
                        drawGraph(response.d);
                    }
            });
    };
    // Callback that creates and populates a data table,  
    function drawGraph(dataValues) {
        // Initialization.  
        var data = new google.visualization.DataTable();
        // Setting.            
        data.addColumn({ id: 'OrderNum', label: 'Order Number', type: 'string' });
        data.addColumn({ id: 'PN', label: 'Part Number', type: 'string' });
        data.addColumn({ id: 'StartDate', label: 'Start', type: 'date' });
        data.addColumn({ id: 'EndDate', label: 'End', type: 'date' });
        // Processing.              
        for (var i = 0; i < dataValues.length; i++) {
            // Setting.  
            data.addRow([dataValues[i].OrderNum, dataValues[i].PN, dataValues[i].StartDate, dataValues[i].EndDate]);
            //data.addRow(['M1', 'PN1', new Date(2023, 1, 4), new Date(2023, 1, 6)]);
        }
        // Instantiate and draw our chart, passing in some options.  
        var container = document.getElementById('CurrentOrders');
        var chart = new google.visualization.Timeline(container);
        // Draw chart.  
        var options = {
            timeline: {
                groupByRowLabel: true
            }
        };
        chart.draw(data, options);
    }

第一也是最重要的问题是我没有得到图表，只是一个错误。

在尝试排除故障时，我对要插入的行值进行了硬编码，以查看 JSON 响应是否是问题所在。

如果我改变..

for (var i = 0; i < dataValues.length; i++) {
            // Setting.  
            data.addRow([dataValues[i].OrderNum, dataValues[i].PN, dataValues[i].StartDate, dataValues[i].EndDate]);
            }

到

for (var i = 0; i < dataValues.length; i++) {
            // Setting.  
            data.addRow(['M1', 'PN1', new Date(2023, 1, 4), new Date(2023, 1, 6)]);
        }

我确实看到了变化，但仍然存在问题。 如果您查看下面的屏幕截图，您会发现订单号不可见，图表中也有 136 行。无论出于何种原因 dataValues.length=136 即使我只从 Webmethod 获得一个结果。

任何建议都很好或者是一个可行的例子。 预先感谢您的帮助！

Answer 1

需要两项来纠正此问题。

虽然我找不到任何详细说明这一点的文档，但在循环遍历数据以获取值之前需要解析数据。

原代码：

var data = new google.visualization.DataTable();
    // Setting.            
    data.addColumn({ id: 'OrderNum', label: 'Order Number', type: 'string' });
    data.addColumn({ id: 'PN', label: 'Part Number', type: 'string' });
    data.addColumn({ id: 'StartDate', label: 'Start', type: 'date' });
    data.addColumn({ id: 'EndDate', label: 'End', type: 'date' });
    // Processing.              
    for (var i = 0; i < dataValues.length; i++) {
        // Setting.  
        data.addRow([dataValues[i].OrderNum, dataValues[i].PN, dataValues[i].StartDate, dataValues[i].EndDate]);            
    }

更改为..

var data = new google.visualization.DataTable();
        // Setting.            
        data.addColumn({ id: 'OrderNum', label: 'Order Number', type: 'string' });
        data.addColumn({ id: 'PN', label: 'Part Number', type: 'string' });
        data.addColumn({ id: 'StartDate', label: 'Start', type: 'date' });
        data.addColumn({ id: 'EndDate', label: 'End', type: 'date' });
        // Processing.

        parsedData = JSON.parse(dataValues);
        
        for (var i = 0; i < parsedData.length; i++) {
            //Setting.  
            data.addRow([parsedData[i].OrderNum, parsedData[i].PN, new Date(parsedData[i].StartDate), new Date(parsedData[i].EndDate)]);
        }

注意 parsedData 变量。

下一个问题是日期字段的 JSON 格式。 根据 Google 文档，使用 JSON 时，日期需要以字符串形式出现。

“使用 addColumn()、addRow() 和 addRows() 方法以及 arrayToDataTable() 方法手动构造 DataTable 时，使用 Date 构造函数非常有用。 但是，如果使用 JSON 指定数据，则字符串需要使用表示法。”

也就是说，日期字段的数据类型已更改为字符串，并在我的查询中以 SQL 正确格式化。