无法根据Ajax值构建时间轴图表

Question

实际上，我正在尝试通过使用从服务器端传递并由ajax接收的数据来使用Google的时间轴图表来构建时间轴图表。

问题是，当我尝试执行此操作时出现以下错误：

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个日期相同（根据{{3 }}。

编辑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)],
]);