Question

所以最近我一直在开发一个从请求中收集数据的网络应用程序，我正在尝试根据每小时/每月的频率等将数据输出到图表中。

所以，我使用Chart.js并拥有日期的JSON数据，并且我试图制作一个显示每小时请求频率的图表等。

我的数据只是每个请求都有一个时间戳，所以我只有2018-01-03 15:15:04格式的一堆时间戳。例如：

{'2018-01-03 15:15:04', '2018-01-04 06:32:45', '2018-01-04 23:32:45', '2018-02-23 01:24:32'}

除了，我有数百个。只需每小时，每月等频率就是我想要的。

有人能指出我正确的方向吗？我的两个想法是：

只需自己进行计数和解析，然后按小时计算，然后将数据扔到图表中
以某种方式使用内置功能的时间，即使在阅读完文档后我仍然有点不清楚。

非常感谢大家！

以下是我想要的一个例子： Chart example

此外，http://www.chartjs.org/samples/latest/scales/time/financial.html

Answer 1

在列表中使用＃1是最好的选择。我写了一个如何轻松实现它的例子。

首先查找频率（我按月/年完成）并将其添加到Map。我使用了地图，因为Map的.keys()和.values()函数按插入顺序返回。常规对象不能保证订单。

然后，Chart.js可以使用spread syntax非常轻松地显示这些值，以将.keys()和.values()迭代器转换为数组。

＆＃13;

var a = ['2018-01-03 15:15:04', '2018-01-04 06:32:45', '2018-01-04 23:32:45', '2018-02-23 01:24:32', '2018-02-23 04:33:12', '2018-03-23 05:33:12', '2018-03-22 08:33:12', '2018-04-27 01:33:12'];

var freqMap = new Map();

a.forEach(function(time) {
  var date = new Date(time);
  var monthName = date.toLocaleString("en-us", {
    month: "short"
  });

  var key = monthName + "-" + date.getFullYear();
  var count = freqMap.get(key) || 0;
  freqMap.set(key, ++count);
});

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [...freqMap.keys()],
    datasets: [{
      label: 'Requests per month',
      data: [...freqMap.values()]
    }],
  },
  options: {
    elements: {
        line: {
            tension: 0
        }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1
        }
      }]
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

＆＃13;

Chart.js - 使用JSON数据创建时间序列频率图表

1 个答案: