求推荐具备时间序列自动聚合功能的JavaScript可视化库

根据你的需求，我整理了几个能轻松搞定时间序列动态聚合+柱状图渲染的JavaScript库，每个都适配你需要的动态时间间隔（分钟/小时/天/周/月）需求：

1. Highcharts #

这应该是最省心的选择，它内置了**数据分组（Data Grouping）**功能，完全不需要你手动写复杂的聚合逻辑。只要配置好时间轴和分组参数，用户切换时间间隔时，库会自动计算对应时间段的amount总和，直接渲染柱状图。

举个简单的配置示例：

// 把原始数据转成Highcharts支持的格式（时间戳转毫秒）
const formattedData = data.map(item => [item.timestamp * 1000, item.amount]);

const chart = Highcharts.chart('chart-container', {
    xAxis: {
        type: 'datetime',
        title: { text: '时间' }
    },
    yAxis: {
        title: { text: 'Amount总和' }
    },
    series: [{
        type: 'column',
        data: formattedData,
        dataGrouping: {
            enabled: true,
            // 配置支持的时间间隔，用户切换时直接更新这里即可
            units: [
                ['minute', [1]],
                ['hour', [1]],
                ['day', [1]],
                ['week', [1]],
                ['month', [1]]
            ]
        }
    }]
});

2. Plotly.js #

Plotly.js对时间序列的交互支持很强，自带缩放、平移等功能，也能自动处理时间间隔的聚合。你只需要配置x轴的时间类型，再通过aggregation相关参数指定聚合规则，就能快速实现动态分组的柱状图。它的优势是上手快，适合快速搭建可视化原型。

3. D3.js #

如果你需要高度定制化的可视化效果，D3.js是绝佳选择。它的d3-time模块提供了丰富的时间间隔工具（比如d3.timeMinute、d3.timeHour），配合d3-array的rollup方法，能轻松实现任意时间间隔的amount总和聚合，然后你可以完全自定义柱状图的样式和交互。

示例聚合逻辑：

import { timeMinute, rollup, sum } from "d3";

// 按1分钟聚合数据
const aggregatedData = rollup(
    data,
    v => sum(v, d => d.amount), // 计算每个分组的amount总和
    d => timeMinute.floor(new Date(d.timestamp * 1000)) // 按分钟分组
);

// 转成适合绘制柱状图的格式
const chartData = Array.from(aggregatedData, ([time, total]) => ({
    time: time.toLocaleString(),
    total
}));

4. Chart.js + Day.js #

Chart.js本身没有内置时间聚合功能，但配合轻量的Day.js（替代Moment.js），你可以手动实现简单的聚合逻辑，再用Chart.js渲染柱状图。这种组合的优势是体积小、易上手，适合对包体积有要求的项目。

示例聚合函数：

import dayjs from 'dayjs';

// 按指定间隔聚合数据
function aggregateData(rawData, interval) {
    const groups = {};
    rawData.forEach(item => {
        // 按指定时间间隔取整，作为分组key
        const groupKey = dayjs.unix(item.timestamp).startOf(interval).valueOf();
        groups[groupKey] = (groups[groupKey] || 0) + item.amount;
    });
    // 转成Chart.js需要的格式
    return Object.entries(groups).map(([time, total]) => ({
        time: dayjs(parseInt(time)).format('YYYY-MM-DD HH:mm'),
        total
    }));
}

// 使用：按小时聚合
const hourlyData = aggregateData(data, 'hour');

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