时间戳

首页 > 解决方案 > Chart.js - 使用 JSON 数据创建时间序列频率图表

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

问题描述

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

因此，我正在使用 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'}

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

谁能指出我正确的方向？我的两个想法是这样的：

  1. 只需自己进行计数和解析，然后得出每小时计数，然后将数据扔到图表上
  2. 不知何故使用他们的内置功能时间，即使在阅读文档后我仍然有点不清楚。

非常感谢大家！

这是我想要的一个例子： 图表示例

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

标签： javascriptwebchart.js

解决方案

在你的名单上排名第一是你最好的选择。我写了一个例子来说明如何很容易地实现它。

首先找到频率（我按月/年）并将其添加到Map。我使用了地图，因为地图的.keys()和.values()函数是按插入顺序返回的。一个普通的对象不能保证秩序。

然后，Chart.js 可以很容易地显示这些值，使用扩展语法将.keys()和.values()迭代器转换为数组。

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
        }
      }]
    }
  }
});
<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>

推荐阅读