React中用Highcharts实现X轴标签分组展示趋势的配置问询

完全可以实现这种X轴分组的效果，下面给你两种可行的方案，都是基于Highcharts原生配置或者轻量扩展：

方案一：原生配置实现（无需额外插件） #

核心思路是将每个测试项作为X轴的独立刻度，然后通过plotLines在X轴上方添加工作周的分组标题，同时调整X轴标签的显示逻辑。

步骤与代码示例 #

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

// 整理你的原始数据
const rawData = {
  ww20: {
    testA: { pass: 2, fail: 3 },
    testB: { pass: 2, fail: 3 },
    testC: { pass: 2, fail: 3 },
    testD: { pass: 2, fail: 3 }
  },
  ww21: {
    testA: { pass: 2, fail: 3 },
    testB: { pass: 2, fail: 3 },
    testC: { pass: 2, fail: 3 },
    testD: { pass: 2, fail: 3 }
  }
};

// 转换为Highcharts需要的格式
const categories = [];
const passData = [];
const failData = [];
// 记录每个工作周对应的刻度起始和结束索引
const weekRanges = [];
let currentIndex = 0;

Object.entries(rawData).forEach(([week, tests]) => {
  const testNames = Object.keys(tests);
  weekRanges.push({
    week,
    start: currentIndex,
    end: currentIndex + testNames.length - 1
  });
  testNames.forEach(test => {
    categories.push(test);
    passData.push(tests[test].pass);
    failData.push(tests[test].fail);
    currentIndex++;
  });
});

// 生成X轴的分组plotLines
const plotLines = weekRanges.map(range => ({
  color: '#000',
  width: 0, // 隐藏线条，只显示标签
  value: (range.start + range.end) / 2, // 标签居中显示
  label: {
    text: range.week,
    align: 'center',
    y: -15, // 调整标签在X轴上方的位置
    style: {
      fontWeight: 'bold'
    }
  }
}));

const options = {
  chart: {
    type: 'column'
  },
  title: {
    text: '测试结果趋势'
  },
  xAxis: {
    categories: categories,
    plotLines: plotLines,
    labels: {
      style: {
        paddingTop: '10px' // 给分组标签留出空间
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: '次数'
    }
  },
  series: [
    {
      name: 'Pass',
      data: passData,
      color: '#2ecc71'
    },
    {
      name: 'Fail',
      data: failData,
      color: '#e74c3c'
    }
  ],
  plotOptions: {
    column: {
      grouping: true,
      pointPadding: 0.1,
      borderWidth: 0
    }
  }
};

const TestTrendChart = () => {
  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default TestTrendChart;

关键配置说明 #

• 数据转换：把原始的嵌套数据拆平，生成X轴的categories（测试项名称）和两个series的数值数组。
• plotLines分组标签：通过计算每个工作周对应的刻度范围，在中间位置添加工作周标签，实现分组效果。
• 样式调整：通过y值控制分组标签的垂直位置，给X轴标签添加paddingTop避免重叠。

方案二：使用Highcharts Grouped Categories插件 #

如果需要更灵活的多级X轴（比如支持更多层级），可以使用官方维护的highcharts-grouped-categories插件，直接配置嵌套的categories即可：

步骤 #

1. 安装插件：

npm install highcharts-grouped-categories

2. 在代码中引入并注册插件：

import Highcharts from 'highcharts';
import HC_groupedCategories from 'highcharts-grouped-categories';

HC_groupedCategories(Highcharts);

3. 配置嵌套的categories：

const options = {
  xAxis: {
    categories: [
      {
        name: 'ww20',
        categories: ['testA', 'testB', 'testC', 'testD']
      },
      {
        name: 'ww21',
        categories: ['testA', 'testB', 'testC', 'testD']
      }
    ]
  },
  // 其他配置同方案一的series、yAxis等
};

这种方式更简洁，适合层级更多的场景，插件会自动处理分组标签的布局和样式。

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