Highcharts-react：如何实现目标图表及Y轴与时间序列自定义

以下是调整后的配置，实现Y轴为固定年份序列（10个数据点）、自定义标题，同时保留堆叠百分比柱状图的样式：

{
  chart: {
    type: "bar",
    stacked: true,
  },
  yAxis: {
    // 设置10个年份作为Y轴类别
    categories: ["1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008"],
    // 自定义Y轴标题
    title: {
      text: "1999-2008"
    },
    // 确保仅显示指定的10个数据点（不自动扩展）
    endOnTick: false,
    startOnTick: false
  },
  xAxis: {
    // X轴为百分比数值轴，适配堆叠百分比需求
    labels: {
      format: "{value}%"
    }
  },
  plotOptions: {
    series: {
      stacking: "percent",
      dataLabels: {
        enabled: false,
      },
    },
  },
  series: [
    {
      name: "No-adopted",
      // 对应Y轴10个年份的数据点
      data: [10, 15, 8, 20, 12, 18, 9, 22, 14, 16],
      color: "#B7B7B7",
    },
    {
      name: "Adopted",
      // 对应Y轴10个年份的数据点
      data: [90, 85, 92, 80, 88, 82, 91, 78, 86, 84],
      color: "#861086",
    },
  ],
};

关键修改说明： #

• Y轴配置调整：将原X轴的类别配置移到yAxis，设置10个年份作为类别；通过title.text自定义Y轴标题；endOnTick和startOnTick设为false，确保Y轴仅显示你指定的10个年份点，不会自动添加额外刻度。
• X轴适配百分比：将X轴改为数值轴，设置labels.format显示百分比符号，匹配堆叠百分比的需求。
• 数据对应调整：两个系列的data数组长度改为10，与Y轴的10个年份一一对应。

如果需要调整年份范围或标题，直接修改yAxis.categories和yAxis.title.text即可。

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