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

Question

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

问题是我在尝试执行此操作时遇到以下错误：

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

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

因为我只是用 ajax 中的数据准备时间线，所以实际值将在稍后设置，而现在我只是尝试使用以下添加空白时间线所以数据的开始和结束应该是一样的。

这里是 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 个日期相同 (根据 ).

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

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

Unable to build a timeline chart from ajax values

javascript

timeline