Highcharts Stock 股票图中的“数据分组”使用解析

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

Highcharts Stock 中的数据分组功能详解

在处理大规模数据集时，数据分组是 Highcharts Stock 提供的一项核心特性，能够显著提升图表的加载与渲染效率。该机制通过将多个连续的数据点合并为一个“分组点”，从而减少需要绘制的元素数量。每个分组点的值由其包含的原始数据点计算得出，保持了整体趋势的准确性。

dataGrouping

基于像素宽度的分组机制

Highcharts Stock 的数据分组以水平轴（x轴）上的像素宽度为基础进行划分。每一个分组大致对应 x 轴上指定数量的像素。不同类型的系列具有不同的默认像素宽度，因为例如折线图比柱状图更能容纳密集的数据点。

例如，若将 groupPixelWidth 设置为 2 像素，在一个宽度为 1000 像素的图表容器中，最多可显示约 500 个分组点。这些点会根据当前视图范围自动聚合和组织。

Highcharts.stockChart('container', {
  series: [{
    dataGrouping: {
      groupPixelWidth: 5
    },
    data: [...]
  }]
});
    

groupPixelWidth

groupPixelInterval

启用与关闭数据分组

可以通过设置 dataGrouping.enabled 来控制是否开启数据分组功能。默认状态下此选项为 true，即自动启用。若需禁用，可将其设为 false。

Highcharts.stockChart('container', {
  series: [{
    dataGrouping: {
      enabled: false
    },
    data: [...]
  }]
});
    

以下示例展示了相同数据在启用与未启用数据分组时的可视化差异：

近似值计算方式（Approximation）

使用 approximation 选项可以定义每个分组点最终数值的计算方法。默认行为依据系列类型而定：

• 线型系列：采用平均值（average）
• 柱状/列型系列：计算总和（sum）
• 区间类系列（如范围图）：取并集的范围（range）
• OHLC 系列：输出该组内完整的开盘、最高、最低、收盘值

approximation

此外，还支持自定义函数实现更灵活的聚合逻辑。如下所示：

自定义分组时间单位（Units）

通过 units 参数可设定允许的数据分组时间单位及其倍数。默认包括毫秒、秒、分钟、小时、天、周、月、年等，并支持组合使用。

例如，以下配置限制数据仅按“日”单位进行分组，且仅允许 1 天、2 天或 3 天的间隔：

Highcharts.stockChart('container', {
  series: [{
    dataGrouping: {
      units: [['day', [1, 2, 3]]]
    },
    data: [...]
  }]
});
    

units

全局分组：groupAll 选项

默认情况下，Highcharts 仅对当前可视区域内的数据点进行分组。然而，在某些场景下，可能希望对整个数据集统一执行分组操作，以确保分组结果不受缩放或平移影响。此时可通过设置 groupAll: true 实现。

启用后，所有数据点都将参与分组过程，即使部分点位于当前视窗之外。这有助于维持一致的聚合逻辑，避免因视角变化导致分组突变。

Highcharts.stockChart('container', {
  series: [{
    dataGrouping: {
      groupAll: true
    },
    data: [...]
  }]
});
    

groupAll

true

下图对比了 groupAll 开启与关闭时的分组效果差异：

强制启用分组：forced 选项

有时即使所有原始数据点都能完整显示在图表中，仍希望强制执行数据分组，比如用于模拟移动平均线等指标的平滑效果。这时可以设置 forced: true。

结合 units 配置，系统会选择最小可用单位进行分组。例如，强制按每秒一组进行聚合：

Highcharts.stockChart('container', {
  series: [{
    dataGrouping: {
      forced: true,
      units: [['second', [1]]]
    },
    data: [...]
  }]
});
    

forced

true

units

分组点的位置锚定（Anchor）

分组后的数据点在时间轴上的位置可通过 anchor 属性进行调整，决定其落在组内哪个时间点：

• start：始终置于时间段起点（如 00:00:00）
• middle：置于中间时刻（如 12:00:00）
• end：置于结束时刻（如 23:59:59）

start

middle

end

此外，firstAnchor 和 lastAnchor 可用于单独控制数据序列中第一个和最后一个分组点的定位策略。除了上述三个值外，它们还可接受特殊值：

firstPoint

数据分组的性能比较

在使用数据分组功能时，图表的整体渲染性能显著提升。其核心原因在于：当需要展示的数据点数量非常庞大时，过多的点不仅无法有效提升图表的可读性，反而会加重渲染负担。通过数据分组，实际参与渲染的点数被大幅减少，从而优化了显示效率。

以下图表展示了在不同数据规模下（从十个点到十万个点），启用数据分组后对系列性能带来的改善效果。

lastPoint

例如，在一组时间点（00:13、00:35、00:59）中：

— 组内的第一个点会被保留并显示，如 00:13；
— 组内的最后一个点同样会被保留，如 00:59。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Charts Chart Stock stoc Hart