Highcharts Stock图表切换范围选择时为何显示数据点？

我在Dashboard中使用Highcharts的Stock图表模块时发现，当以特定方式缩放或切换范围选择时，原本没有数据点的位置会出现额外的数据点。

以下是该图表在Dashboard中的组件配置：

{
  "renderTo": "stock-cell",
  "type": "Highcharts",
  "chartConstructor": "stockChart",
  "connector": {
    "id": "example-budget-data",
    "columnAssignment": [
      {
        "seriesId": "Total Spend",
        "data": ["d", "Total"]
      }
    ]
  },
  "sync": {
    "highlight": true
  },
  "tooltip": {
    "useHTML": true
  },
  "chartOptions": {
    "chart": {
      "className": "highcharts-stock-chart"
    },
    "title": {
      "text": "Total Spend"
    },
    "series": [
      {
        "name": "Total Spend",
        "id": "total-spend"
      }
    ]
  }
}

浏览器环境：

• Google Chrome: 128.0.6613.138（官方版本，64位，Stable频道）
• Revision: d6209c7e65ea9d64ce403e9de18f8915e2f8708a-refs/branch-heads/6613@{#1712}
• OS: Windows 11 Version 23H2（内部版本22631.4169）

这个问题是Highcharts Stock图表的**数据分组（data grouping）**特性导致的。当图表缩放至特定级别时，Highcharts会自动对数据进行分组聚合，生成中间数据点来优化大数量级数据的显示性能，这些聚合后的点就会以数据点形式呈现出来。

要解决这个问题，你可以通过以下两种方式调整配置：

方案1：完全禁用数据分组 #

在series配置中添加dataGrouping: { enabled: false }，彻底关闭自动分组功能：

"series": [
  {
    "name": "Total Spend",
    "id": "total-spend",
    "dataGrouping": {
      "enabled": false
    }
  }
]

方案2：调整数据分组的触发条件 #

如果需要保留数据分组的性能优化，仅想避免在常规缩放级别出现额外数据点，可以设置groupPixelWidth（分组触发的最小像素宽度），将其设为较大值，让分组仅在极端缩放时生效：

"series": [
  {
    "name": "Total Spend",
    "id": "total-spend",
    "dataGrouping": {
      "groupPixelWidth": 100
    }
  }
]

另外，也可以通过approximation配置自定义聚合逻辑，让分组结果更贴合业务需求，但直接禁用数据分组是解决“出现额外数据点”问题最直接的方式。

内容的提问来源于stack exchange，提问作者Neil C. Obremski