javascript - 每 x 小时/天存储/保存数据库值并将其显示为图表 - 收集统计数据

Question

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

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

现在，我猜这不是最好的主意，而且我没有图表经验。我想知道是否有人建议我一个更好的想法(如果有的话，或者这不是最糟糕的)，以及关于图表的解决方案，我应该使用它。

我想要的一个例子是 GameTracker

http://www.gametracker.com/player/SpaceCow%28%E2%98%82%29/216.52.148.47:27015/

编辑:很可能这样我什至不需要第二个表，我只需创建一个新列并将数组插入其中。

Answer 1

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

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

首先包括这个Github: Chart.js 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>

由于您发布的 GameTracker 链接中的图表类型称为“垂直”条形图(看到黄色垂直条了吗？就是这样)。

现在转到垂直(条形图下)查看 Chartjs.org Types of chart 中的示例现在您会看到一些有用的东西，这就是您的图表的样子(不要担心该示例中的负值，我们不需要它，因为玩家不会在负数小时内玩/上线)

[Now the coding part ]图形将在 Canvas 元素内呈现。看一下下面的代码，然后只需阅读我在代码中包含的“注释”，您就会明白。

<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>

您可以阅读文档以获取更多信息，一切都在其中。

“div”标签的 CSS 代码:(你可以设置任何你喜欢的内容，这只是一个例子，当我自己运行该代码时，我发现将 canvas 元素放在 div 中并设置 div 宽度可以解决 x-y我使用默认/原始代码时遇到的缩放问题)

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