javascript - 如何动态生成图表的日期/时间值？

Question

我在 MySQL 数据库中有过去几年的一大组数据。这些行中的每一行都有一个时间戳列。这就是我想在图表中用于 x 轴的内容。

我想做的是将这些日期分解为逻辑组，并向用户显示包含正确日期和与该时间范围相关的汇总数据的图表。用户将能够动态选择日期范围。

我想要的是类似的东西:例如，当用户选择今天(或一天的框架)时，我希望软件将数据分成 2 小时的 block 是12个数据集(我的空间只有12个)。但是，如果他们选择 2 天，我也想将其分成 12 个相等的部分。如果他们选择 15 天、3 年等，我仍然希望脚本将数据分成 12 block (同时汇总行的数据)。

这是我想以某种方式动态实现的结果示例。为此，我可以使用 MySQL、PHP 和 Javascript。以下格式只是一种表示形式，可以是数组，对象，任何东西:

例如，这是我在数据库中的数据:

id  |   value   |   date                |
-----------------------------------------
1   |   12      |   2017-01-23 00:13:12 |
2   |   54      |   2017-01-23 08:33:23 |
3   |   45      |   2017-01-23 09:01:57 |
4   |   94      |   2017-01-22 05:17:15 |
5   |   67      |   2017-01-22 10:12:44 |
6   |   3       |   2017-01-22 22:56:54 |
7   |   44      |   2017-01-22 23:27:55 |
8   |   19      |   2017-01-21 15:02:23 |
9   |   8       |   2017-01-21 00:14:54 |

这是在将数据发送到我的图表之前我想要的:

id  |   value   |   date                |
-----------------------------------------
1   |   12      |   2017-01-23 06:00:00 |
2   |   99      |   2017-01-23 12:00:00 |
3   |   0       |   2017-01-23 18:00:00 |
4   |   0       |   2017-01-23 23:59:59 |
5   |   94      |   2017-01-22 06:00:00 |
6   |   67      |   2017-01-22 12:00:00 |
7   |   0       |   2017-01-22 18:00:00 |
8   |   47      |   2017-01-21 23:59:59 |
9   |   8       |   2017-01-21 06:00:00 |
10  |   0       |   2017-01-21 12:00:00 |
11  |   19      |   2017-01-21 18:00:00 |
12  |   0       |   2017-01-21 23:59:59 |

同样，日期范围是多少并不重要，脚本应自动将其分成 12 个相等的部分。

知道如何实现吗？我在 Internet 上看到了很多此类图表，并且必须有一种简单的方法来执行此操作 - 而不仅仅是手动对条件进行编码。

Answer 1

您可以使用 SQL、PHP 和 JavaScript 执行此操作。选择实际上是个人喜好的问题。我将在此处提供一个 PHP 函数来执行此操作:

function group_data($data, $count) {
    usort($data, function ($a, $b) {
        return strcmp($a["date"], $b["date"]);
    });
    $result = [];
    $first = new DateTime($data[0]["date"]);
    $first->setTime(0, 0); // First group always starts at midnight
    $last = new DateTime($data[count($data)-1]["date"]);
    // Group size is always an integer number of hours:
    $hours = ceil(($first->diff($last)->days + 1) * 24 / $count);
    $group_interval = new DateInterval("PT{$hours}H");
    while ($count--) { // for each group
        $first->add($group_interval); // Increment the date with the fixed group size
        $date = $first->format('Y-m-d H:i:s');
        // Accumulate the values in the data that precede this date/time:
        $value = 0;
        while (current($data) && current($data)["date"] < $date) {
            $value += current($data)["value"];
            next($data); // Move to the next record
        }
        // Append this group to the result
        $result[] = ["id" => count($result)+1, "value" => $value, "date" => $date];
    }
    return $result;
}

这是一个如何使用它的例子。我假设您已经从数据库中选择了数据并将其放入关联数组中:

$data = [
    ["id" => 1, "value" => 12, "date" => "2017-01-23 00:13:12"],
    ["id" => 2, "value" => 54, "date" => "2017-01-23 08:33:23"],
    ["id" => 3, "value" => 45, "date" => "2017-01-23 09:01:57"],
    ["id" => 4, "value" => 94, "date" => "2017-01-22 05:17:15"],
    ["id" => 5, "value" => 67, "date" => "2017-01-22 10:12:44"],
    ["id" => 6, "value" =>  3, "date" => "2017-01-22 22:56:54"],
    ["id" => 7, "value" => 44, "date" => "2017-01-22 23:27:55"],
    ["id" => 8, "value" => 19, "date" => "2017-01-21 15:02:23"],
    ["id" => 9, "value" =>  8, "date" => "2017-01-21 00:14:54"],
];

// Use the function to divide the data into 12 equally sized groups    
$result = group_data($data, 12);

运行上述示例后，$result 变量将具有以下数据:

[
    ["id" =>  1, "value" =>  8, "date" => "2017-01-21 06:00:00"],
    ["id" =>  2, "value" =>  0, "date" => "2017-01-21 12:00:00"],
    ["id" =>  3, "value" => 19, "date" => "2017-01-21 18:00:00"],
    ["id" =>  4, "value" =>  0, "date" => "2017-01-22 00:00:00"],
    ["id" =>  5, "value" => 94, "date" => "2017-01-22 06:00:00"],
    ["id" =>  6, "value" => 67, "date" => "2017-01-22 12:00:00"],
    ["id" =>  7, "value" =>  0, "date" => "2017-01-22 18:00:00"],
    ["id" =>  8, "value" => 47, "date" => "2017-01-23 00:00:00"],
    ["id" =>  9, "value" => 12, "date" => "2017-01-23 06:00:00"],
    ["id" => 10, "value" => 99, "date" => "2017-01-23 12:00:00"],
    ["id" => 11, "value" =>  0, "date" => "2017-01-23 18:00:00"],
    ["id" => 12, "value" =>  0, "date" => "2017-01-24 00:00:00"],
]