Highcharts配置dataGrouping.units按天分组不生效是什么原因？

问题原因 #

• 核心原因：你当前使用的是普通Highcharts库，而非Highstock。dataGrouping是Highstock专属特性，普通Highcharts不会识别该配置项，因此分组逻辑不生效，数据仍然按照原始1小时的间隔渲染。
• 若已确认引入Highstock仍无效，则是因为dataGrouping缺少groupAll: true配置项。即使设置了forced: true，如果没有开启groupAll，当数据时间跨度较短时，分组逻辑也不会触发。
• 额外注意：部分React的Highcharts封装组件需要显式指定使用StockChart构造函数，若使用默认的普通Chart构造函数，也会导致Highstock专属的配置不生效。

解决方案 #

1. 确认引入的是Highstock库，而非普通Highcharts，以React项目使用highcharts-react-official封装为例：

// 引入Highstock而不是普通highcharts
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';

2. 组件调用时指定构造函数类型为StockChart：

<HighchartsReact
  highcharts={Highcharts}
  constructorType={'StockChart'}
  options={chartOptions}
/>

3. 补充dataGrouping的groupAll: true配置，修改后的完整配置如下：

const chartOptions = {
    chartType: 'stock', 
    chart: { type: 'line' }, 
    rangeSelector: { enabled: false }, 
    navigator: { enabled: false },
    yAxis: { visible: false }, 
    legend: { enabled: true }, 
    scrollbar: { enabled: false  },
    xAxis: { type: 'datetime' },
    plotOptions: {
        line: { marker: { enabled: true } },
        series: { 
            dataLabels: { enabled: true, allowOverlap: true }, 
            dataGrouping: { 
                approximation: "sum", 
                forced: true, 
                groupAll: true,
                units: [['day', [1]]] 
            }
        }
    }
}

修改完成后即可实现所有数据按天维度求和分组，每天仅渲染一个数据点。

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