javascript - 无法从 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 个日期相同(根据 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)],
]);