在Highcharts中如何基于小时级时序访问数据自动绘制累计值图表

Highcharts没有提供原生的一键配置项直接将时序原始值自动转换为累计值，但你可以通过它暴露的事件钩子，在不手动修改原始数据源的前提下自动完成累计计算，常用实现方案如下：

单序列累计（你的需求场景） #

使用chart.events.load事件在图表渲染前自动完成累计值计算，原始数据不会被修改：

// 你的原始访问量数据
const rawData = [
  [1631138400000, 8],
  [1631142000000, 3],
  [1631145600000, 2],
  // 剩余数据...
]

// Highcharts 配置
const options = {
  chart: {
    type: 'line',
    events: {
      load: function () {
        let count = 0
        const cumulativeData = rawData.map(item => {
          count += item[1]
          return [item[0], count]
        })
        this.series[0].setData(cumulativeData)
      }
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    name: '累计访问量',
    data: [] // 这里不需要提前赋值，load事件会自动填充
  }]
}

多序列堆叠累计场景 #

如果你后续需要统计多个维度的访问量总和，不需要做任何数据处理，直接开启堆叠配置即可自动计算每个时间点的累计值：

const options = {
  yAxis: {
    stackLabels: {
      enabled: true, // 开启展示累计总值
    }
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [
    {name: 'PC端访问量', data: rawPcData},
    {name: '移动端访问量', data: rawMobileData}
  ]
}

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