Highcharts如何提取JSON数据值用于xAxis及tooltip显示

你当前使用的[周期文本, 数值]二维数组是Highcharts原生兼容的分类数据格式，不需要额外做数据结构转换，补全两项核心配置即可实现x轴刻度、Tooltip显示周期值的需求：

1. 将x轴类型设置为category，组件会自动读取每个数据项的第一个字符串作为x轴刻度文本
2. 自定义Tooltip格式化逻辑，从数据点对象上直接读取绑定的周期值

可直接复用的完整配置示例 #

// 后端/SQL返回的原始系列数据，无需做格式转换
const rawSeries = {
  "data": [
    ["01 Jun 2022 - 05 Jun 2022", 2409],
    ["06 Jun 2022 - 12 Jun 2022", 2722],
    ["13 Jun 2022 - 19 Jun 2022", 2660]
  ],
  "name": "Unique Users"
};

// 初始化图表
Highcharts.chart('你的图表容器DOM ID', {
  chart: {
    type: 'column' // 按你实际需要的图表类型替换，line/bar等类型均兼容
  },
  title: {
    text: '周期用户数统计' // 自行替换为实际图表标题
  },
  xAxis: {
    // 核心配置：指定为分类轴，自动识别数据项第一个值为刻度
    type: 'category',
    labels: {
      // 可选配置：调整刻度文本样式，避免长文本重叠
      rotation: 0,
      style: {
        fontSize: '12px'
      }
    }
  },
  yAxis: {
    title: {
      text: '用户数'
    }
  },
  tooltip: {
    // 核心配置：自定义提示框内容
    formatter: function () {
      // 原有取值逻辑可保留：this.series.name取系列名，this.y取数值
      // 周期值直接通过this.point.category获取，对应数据里的日期段字符串
      return `
        <b>${this.series.name}</b><br/>
        统计周期：${this.point.category}<br/>
        数值：${this.y}
      `;
    }
  },
  series: [rawSeries] // 直接传入原始数据即可
};

关键注意点 #

• 你之前使用this.series.name获取系列名、this.y获取y轴数值的写法完全兼容，不需要修改
• 只要xAxis配置了type: 'category'，不管是在Tooltip、数据点点击事件、标签格式化回调里，都可以通过this.point.category拿到对应数据项的周期字符串，不需要手动遍历数组提前提取x轴分类
• 如果周期文本过长导致x轴刻度重叠，可以通过xAxis.labels.rotation调整旋转角度，或者加formatter自定义截断/换行规则，不需要改动原始数据结构

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