无法根据ajax值构建时间表图表

Question

实际上我正在尝试使用谷歌的一个时间线图表，使用从服务器端传递并由ajax接收的数据。

问题是，当我尝试这样做时，我得到以下错误：

Uncaught Error: Row given with size different than 4 (the number of columns in the table).

虽然这是我从$ .each循环得到的

由于我只是准备了来自ajax的数据的时间线，实际值将在稍后设置，而现在我只是尝试使用以下guide添加空白时间轴，因此数据的开始和结束应该是相同的。

这是ajax代码：

$.ajax({
    type: "POST",
    url: "prenotazioni.aspx/getTavolo",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $.each(msg.d, function (k, v) {
            //console.log(v);
            dataTable.addRow([[v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]]);
        });

    }
});

更新：这就是我想从ajax循环自动到达的内容

问题是，要使单元格为空白，开始日期和结束日期必须相同，但对于所有行，这里不能相同的是如何构建以下时间轴

dataTable.addRows([
    ["33", '', new Date(0, 0, 0, 11, 0, 0), new Date(0, 0, 0, 11, 0, 0)],
    ["Tavolo 2", '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)],
    ["Tavolo 3", '', new Date(0, 0, 0, 13, 0, 0), new Date(0, 0, 0, 13, 0, 0)],
    ["Tavolo 4", '', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 14, 0, 0)],
    ["Tavolo 5", '', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
    ["Tavolo 6", '', new Date(0, 0, 0, 16, 0, 0), new Date(0, 0, 0, 16, 0, 0)],
    ["Tavolo 7", '', new Date(0, 0, 0, 19, 0, 0), new Date(0, 0, 0, 19, 0, 0)],
    ["Tavolo 8", '', new Date(0, 0, 0, 20, 0, 0), new Date(0, 0, 0, 20, 0, 0)],
    ["Tavolo 9", '', new Date(0, 0, 0, 21, 0, 0), new Date(0, 0, 0, 21, 0, 0)],
]);

所以现在的问题是如何使行的开始和结束时间相同但每行不同。

Answer 1

我认为问题在于您尝试添加仅包含元素的单行：

dataTable.addRow([[v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]]);

使用此行，您尝试添加此数据：

[
    [v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]
]

这只是一个单独的元素（一个列表中包含一个列表），当你需要其中4个来构成一个完整的行时（在你的情况下它应该包含4个元素）。

只需删除额外的括号，您应该没问题：

dataTable.addRow([v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]);

编辑：您在评论中报告的新错误（Error: <text> attribute x: Expected length, "NaN"）可能是由于您提供的2个日期相同（根据this answer）。

编辑2：编辑后：

正如我在回复您的评论时所说，行的结束日期可以与下一行的结束日期相同。试试这个 ：

dataTable.addRows([
    ["33", '', new Date(0, 0, 0, 11, 0, 0), new Date(0, 0, 0, 12, 0, 0)],
    ["Tavolo 2", '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 0, 0)],
    ["Tavolo 3", '', new Date(0, 0, 0, 13, 0, 0), new Date(0, 0, 0, 14, 0, 0)],
    ["Tavolo 4", '', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
    ["Tavolo 5", '', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 16, 0, 0)],
    ["Tavolo 6", '', new Date(0, 0, 0, 16, 0, 0), new Date(0, 0, 0, 17, 0, 0)],
    ["Tavolo 7", '', new Date(0, 0, 0, 19, 0, 0), new Date(0, 0, 0, 20, 0, 0)],
    ["Tavolo 8", '', new Date(0, 0, 0, 20, 0, 0), new Date(0, 0, 0, 21, 0, 0)],
    ["Tavolo 9", '', new Date(0, 0, 0, 21, 0, 0), new Date(0, 0, 0, 22, 0, 0)],
]);