Javascript 每x小时/天存储/保存一个数据库值，并将其显示为图表-收集统计信息

所以，对于每个成员，都有一个保存在数据库“timeOnline”上的值，该值基本上随着成员保持在线而增加。我想要的是一种在一个月内每小时/天存储此数据库值的方法。一个月后，数据基本上会被新数据覆盖。现在，显然创建一个包含31列的新表并将数据保存在相应列上有点太“粗糙”，我正在考虑使用serialize将其保存为数据库上的数组。现在我需要从旧表（每个成员）获取数据并将其保存到新表中，我假设我必须设置某种cron作业

考虑到我成功地正确保存了这些数据，现在我需要获取它们，并创建一个图表（基本上是显示过去30天在线时间的图表）。在这里，我假设我必须从新的日期中减去旧的日期（即时间戳），在此之前，我必须取消数组的序列化

现在，我猜这不是最好的主意，我没有图表方面的经验。我想知道是否有人给了我一个更好的主意（如果有，或者这不是最坏的），以及一个关于图表的解决方案，我应该使用哪个

我想要的一个例子是GameTracker

---

编辑：很可能这样我甚至不需要第二个表，我只需要创建一个新列并在那里插入数组。

我假设您熟悉PHP，知道如何从PHP传递值并在JavaScript上使用它

我发现了一个用于制作图形的Javascript库。这很容易。即使您以前没有使用过graph/chart，现在也会变得简单

首先在HTML代码中包含这个名为Chart.js的Javascript库。可能还有其他库，我随机选择了这个（Charts.js）。要使用Chart.js，根本不需要jQuery库。尽管您也可以包含它并相应地使用它

例如，我为Chart.js库提供了CDN链接。您可以从项目文件夹下载并包含该chart.min.js文件

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js></script>

---

我怀疑我是否正确理解您的问题（尝试更多解释或示例？）但您所说的保存数据的方法是序列化值，这与使用关系数据库的目的背道而驰。我提供的链接上的图表对此进行了最好的解释。当您只需要存储用于登录和注销的日期时间，然后按日期范围查询并获得每个entryWell的差异时，这似乎过于复杂了，不一定是登录时间。数据是从其他来源保存的，我所拥有的是timeOnline列，它可以节省成员联机的秒数。基本上是统计目的您知道如何每隔x天/小时保存数据库值吗？或者我应该按照上面解释的方式来做？使用cron作业。@Klajdi您可以使用日期函数，从上午00:00:00到晚上23:59:59开始收集每天的值（更新列），作为该数组中的不同元素。假设您获得timeOnline=774秒，在给定时刻将其保存到sql列中，还将其保存到另一个变量（如lastSeconds js/php）中，您现在需要做的就是将lastSeconds与timeOnline进行比较，如果timeOnline==lastOnline为真，则什么也不做。如果为FALSE，则使用此新的timeOnline值更新列。你甚至没有展示过你这边的任何代码，没有这些，没有人能进一步帮助你。好吧，因为我的大部分问题都得到了回答，我把这个标记为已回答。谢谢

<div id="d1">
<canvas id="myChart"></canvas>
</div>

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Day1", "Day2"], // this is where you put the day value you can write whatever you want and it will show on the bar. There are two bars in here; first is "Day1" and second is "Day2". You can add as many bars as you want.
        datasets: [{
            label: 'Player Time in Hours for each day', // set the lable for the graph in here, whatever you like.
            data: [12, 9],  // this is where you put the number values in hrs; first value "12" hrs is for "Day1" and so on.
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', //this is the color of first bar, you can use normal values like "crimson" or "yellow" or etc as well instead of rgba or rgb values.
                'rgba(54, 162, 235, 0.2)' //color of the second bar and so on
            ],
            borderColor: [
                'rgba(255,99,132,1)', //border color for the first bar
                'rgba(54, 162, 235, 1)' //border color for the second bar and so on
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{


                  ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    </script>

    #d1{
          border: 1px solid black;
          Width: 400px;
       }