使用Chart.js基于JSON时间戳数据生成请求频次时序图

嘿，这需求我熟！用Chart.js来做时间维度的请求频次统计完全没问题，我给你一步步拆解怎么做：

首先得把你的JSON字符串时间戳转换成可分组的格式，核心思路是按你需要的维度（小时/月等）对时间戳做格式化，然后统计每个维度下的请求数。

比如按小时统计的话，我们可以把每个时间戳格式化成「YYYY-MM-DD HH」（比如"2018-01-03 15"）作为分组键，然后计数。直接上代码：

// 你的原始数据示例
const rawTimestamps = [
  '2018-01-03 15:15:04',
  '2018-01-04 06:32:45',
  '2018-01-04 23:32:45',
  // 更多数据...
];

// 定义一个通用的分组统计函数
function groupTimestampsByDimension(timestamps, dimension) {
  const counts = {};
  
  timestamps.forEach(ts => {
    const date = new Date(ts);
    let key;
    
    switch(dimension) {
      case 'hour':
        // 格式化为 年-月-日 时
        key = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}`;
        break;
      case 'month':
        // 格式化为 年-月
        key = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}`;
        break;
      case 'day':
        // 格式化为 年-月-日
        key = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        break;
      default:
        throw new Error('不支持的维度，请选择 hour/month/day');
    }
    
    counts[key] = (counts[key] || 0) + 1;
  });
  
  // 把统计结果转换成Chart.js需要的数组格式：labels和data
  return {
    labels: Object.keys(counts).sort(), // 排序保证时间顺序
    data: Object.values(counts)
  };
}

// 按小时统计的结果
const hourlyStats = groupTimestampsByDimension(rawTimestamps, 'hour');
// 按月统计的结果
const monthlyStats = groupTimestampsByDimension(rawTimestamps, 'month');

接下来就是把统计好的数据喂给Chart.js。这里以柱状图为例，需要注意x轴的时间格式适配，确保显示正常：

<!-- 先在HTML里加一个canvas容器 -->
<canvas id="requestFrequencyChart"></canvas>

<!-- 引入Chart.js（可以用CDN或者本地文件） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 如果需要更灵活的时间格式化，建议引入moment.js（Chart.js v3+也支持原生时间适配器，但moment更方便） -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>

<script>
// 初始化图表
const ctx = document.getElementById('requestFrequencyChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar', // 可以换成line折线图
  data: {
    labels: hourlyStats.labels, // 用按小时统计的标签
    datasets: [{
      label: '每小时请求频次',
      data: hourlyStats.data, // 对应的频次数据
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '请求次数'
        }
      },
      x: {
        title: {
          display: true,
          text: '时间'
        },
        // 如果是时间维度，开启时间轴配置（需要moment适配器）
        type: 'time',
        time: {
          unit: 'hour', // 对应你统计的维度，按月的话就设为'month'
          displayFormats: {
            hour: 'YYYY-MM-DD HH:mm', // 自定义x轴标签显示格式
            month: 'YYYY-MM'
          }
        }
      }
    }
  }
});

// 如果要切换成按月统计，只需要更新data即可：
// chart.data.labels = monthlyStats.labels;
// chart.data.datasets[0].label = '每月请求频次';
// chart.data.datasets[0].data = monthlyStats.data;
// chart.options.scales.x.time.unit = 'month';
// chart.update();
</script>

• 如果你的数据量很大，建议先在后端做统计再返回前端，这样前端性能会好很多；
• Chart.js的time配置里，unit一定要和你统计的维度对应，不然x轴显示会混乱；
• 想要折线图的话，把type改成line就行，其他配置基本通用；
• 如果不想用moment.js，Chart.js v3+还支持原生的date-fns适配器，按需选择就好。

内容的提问来源于stack exchange，提问作者Drew Wilken