JavaScript 甘特图中的日期字符串转换：解决 \

使用 JavaScript Google 甘特图时处理 PHP 数组输入中的日期转换

简介

本文将探讨将 PHP 数组作为输入提供给 JavaScript Google 甘特图时遇到的一个常见问题。具体来说，我们将重点关注“无效的数据表格式：第 5 列必须是 'number' 类型”错误消息。

问题：数据表格式错误

当我们尝试将 PHP 数组作为输入提供给甘特图时，我们可能会遇到错误消息：“无效的数据表格式：第 5 列必须是 'number' 类型”。这是因为甘特图期望第 5 列（索引为 4）包含数字类型数据，而我们的 PHP 数组中该列可能包含日期字符串。

解决方案：转换日期字符串

为了解决这个问题，我们需要将 PHP 数组中的日期字符串转换为 JavaScript 中可以接受的日期对象。为此，我们可以使用 strtotime 函数将日期字符串转换为时间戳，然后使用 DateTime 对象表示日期。

修改 PHP 代码

ganttData = array_map(function ($row) {
    $startDate = strtotime($row[2]);
    $endDate = strtotime($row[3]);

    return [
        $row[0],
        $row[1],
        new DateTime('@' . $startDate),
        new DateTime('@' . $endDate)
    ];
}, $ganttData);

修改 JavaScript 代码

接下来，我们需要在 JavaScript 代码中将 DateTime 对象转换为甘特图可以接受的格式。我们可以使用 toLocaleDateString 方法将 DateTime 对象转换为日期字符串，然后使用 split 将其拆分为年份、月份和日期部分。最后，使用这些部分创建 Date 对象。

var startDateParts = row[2].toLocaleDateString().split('/');
var endDateParts = row[3].toLocaleDateString().split('/');

row[2] = new Date(parseInt(startDateParts[2]), parseInt(startDateParts[0]) - 1, parseInt(startDateParts[1]));
row[3] = new Date(parseInt(endDateParts[2]), parseInt(endDateParts[0]) - 1, parseInt(endDateParts[1]));

结论

通过这些更改，我们的甘特图现在应该能够正确加载和显示 PHP 数组中的数据。通过将日期字符串转换为 JavaScript 中接受的格式，我们解决了“无效的数据表格式：第 5 列必须是 'number' 类型”错误消息。

常见问题解答

• 为什么第 5 列必须是数字类型？ 甘特图的甘特条的持续时间由两列日期列表示。因此，这些列必须包含数字类型数据，表示持续时间的毫秒数或天数。
• 我还可以使用其他方法来转换日期字符串吗？ 是的，你可以使用任何将日期字符串转换为 JavaScript 中接受的格式的方法，例如 Date.parse 或第三方库。
• 我该如何处理其他类型的输入错误？ 其他类型的输入错误可能是由各种原因引起的，例如无效的数据格式、缺少必需的列或数据验证规则。仔细检查输入数据并确保符合甘特图的预期格式。
• 如何在甘特图中自定义甘特条的颜色和样式？ 你可以通过修改甘特图的 style 对象来自定义甘特条的外观，该对象允许你控制填充色、边框色、字体和阴影。
• 如何将事件处理程序添加到甘特图？ 你可以使用 addListener 方法将事件处理程序添加到甘特图，该方法允许你对甘特条的单击、双击和悬停事件做出响应。