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

我在MySQL数据库中保存了过去几年的大量数据。这些行中的每一行都有一个Timestamp列。这是我想在图表中使用的x轴

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

我想要的是类似的东西：例如，当用户选择“今天”（或一天帧）时，我希望软件将数据分解为2个小时的块，即12个数据集（我只有12个空间）。然而，如果他们选择2天，我想把它分成12个相等的部分。如果他们选择15天、3年等等，我仍然希望脚本将数据分成12部分（同时汇总行中的数据）

下面是一个我希望以某种方式动态实现的结果的示例。我可以使用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个相等的部分

---

你知道如何做到这一点吗？我在互联网上看到了很多这种类型的图表，必须有一种简单的方法来做到这一点，而不仅仅是手动编码条件。

听起来你只需要创建一个包含整个数据集的数组 比如： SQL

从表中选择*
其中（日期介于日期1和日期2之间）；
//将数据集发送到所需位置

业务逻辑

Array=[…数据集]；
函数（数组）{
让length=Array.length；
让截面长度=数学楼层（长度/12）；
for（设i=0；i=截面长度&&i<（截面长度*2））{
//第二箱
}

…然后etc必须解决剩余情况，因为剩余情况可能介于0和12个情况之间，因此bin分布将不同 `功能（阵列1、阵列2、阵列3…等{ foreach（参数）{

显示（参数） }`

---

这只是一段伪代码，但希望您能明白这一点，听起来您只需要创建一个包含整个数据集的数组 比如： SQL

从表中选择*
其中（日期介于日期1和日期2之间）；
//将数据集发送到所需位置

业务逻辑

Array=[…数据集]；
函数（数组）{
让length=Array.length；
让截面长度=数学楼层（长度/12）；
for（设i=0；i=截面长度&&i<（截面长度*2））{
//第二箱
}

…然后etc必须解决剩余情况，因为剩余情况可能介于0和12个情况之间，因此bin分布将不同 `功能（阵列1、阵列2、阵列3…等{ foreach（参数）{

显示（参数） }`

---

这只是一段伪代码，但希望您能理解，您可以使用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;
}

运行上述示例后，

$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"],
]

---

您可以在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;
}

运行上述示例后，

$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"],
]

---

注意：你希望时间部分按升序排列，而日期则按降序排列，这有点奇怪。@trincot排序并不重要。这只是一个例子。当日期范围为3天时，这个例子很清楚，可以很容易地分成12组。但是如果日期范围为5天呢？你会怎么做那么你就这样做？或者有15天的时候？好的，那么你会有一组在一天内开始，在下一天结束。第一组总是在午夜开始吗？在你的例子中，你是如何确定06:00的开始时间的？开始时间应该总是在零分钟（整小时）吗或者他们可以是什么？你可以想象组的大小有一些小时、分钟和秒。可以吗？啊，好的，我明白了。所以第一组的开始和最后一组的结束总是在午夜。其他组的划分可能会有所不同，对吧？注：你希望时间部分按升序排列，而日期则按升序排列，这有点奇怪降序。@trincot排序无关紧要。这只是一个例子。这个例子很清楚日期的范围是3天，可以很容易地分成12组。但是如果日期的范围是5天，你会怎么做？或者是15天？好的，那么你会有一个从一天开始到下一天结束的组。Sh第一组是否总是在午夜开始？在您的示例中，您是如何确定06:00的开始时间的？开始时间是否应该始终为零分钟（整小时）或者他们可以是什么？你可以想象组的大小有一些小时，分钟和秒。可以吗？啊，好的，我明白了。所以第一组的开始和最后一组的结束总是在午夜。其他组的划分可能会有所不同，对吧？哇，太棒了！工作起来很有魅力！代码非常有用，并且按照预期工作。非常感谢你的时间创建此脚本。我非常感谢！哇，太棒了！工作起来很有魅力！代码非常有用，工作正常。非常感谢您花时间创建此脚本。我非常感谢！