堆叠条形图Y轴经办人名称标签重叠，如何增加间距优化可读性？

我正在开发一款以经办人名称为Y轴的堆叠条形图，当经办人数量过多时，Y轴的名称标签会出现重叠（示例图如下），希望通过增加标签间距让文字清晰可读。

图表组件代码 #

import React, { useRef } from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar, getElementsAtEvent } from "react-chartjs-2";
import { type StackedChartProps } from "next/types";
import Loading from "../loading";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  indexAxis: "y" as const,
  plugins: {},
  resposive: true,
  scales: {
    x: {
      stacked: true,
      beginAtZero: true,
      ticks: {
        autoSkip: false,
      },
    },
    y: {
      stacked: true,
      ticks: {
        autoSkip: false,
      },
    },
  },
};

type StackedBarProps = StackedChartProps;

export default function StackedBarChart({
  onClick,
  width,
  height,
  isLoading,
  level,
  data,
}: StackedBarProps) {
  const ref = useRef<ChartJS<"bar", any, any> | null>(null);

  const handleClick = (e: any) => {
    const field =
      data.labels[getElementsAtEvent(ref.current as any, e)[0]?.index ?? 0];
    if (ref.current && onClick) onClick(field, level);
  };

  return (
    <div className="flex justify-center bg-white">
      {isLoading ? (
        <Loading className={`w-[${width}] h-[${height}]`} />
      ) : (
        <Bar options={options} ref={ref} data={data} onClick={handleClick} />
      )}
    </div>
  );
}

图表数据计算代码 #

const dataset: StackedChartData = {
      labels: assignees,
      datasets: stages.map((stage) => ({
        label: stage,
        data: [],
        backgroundColor: getStatusColor(stage),
      })),
    };

    dataset.datasets.forEach((data, datasetIndex) => {
      dataset.labels.forEach((label) => {
        let count = 0;
        issues.forEach((issue) => {
          if (issue.fields.assignee?.displayName !== label) return;
          if (
            normalizeString(data.label) !==
            normalizeString(issue.fields.status.name)
          )
            return;
          count++;
        });
        dataset.datasets[datasetIndex]?.data.push(count);
      });
    });

解决方案 #

1. 调整Y轴间距与图表高度 #

先修正options里的拼写错误：resposive改为responsive，然后通过以下配置增加标签间距：

export const options = {
  indexAxis: "y" as const,
  plugins: {},
  responsive: true,
  maintainAspectRatio: false, // 取消宽高比限制，让图表高度自适应内容
  scales: {
    x: {
      stacked: true,
      beginAtZero: true,
      ticks: {
        autoSkip: false,
      },
    },
    y: {
      stacked: true,
      barThickness: 20, // 固定条形厚度，避免过度拥挤
      minBarLength: 5, // 确保短条形也有可见长度
      ticks: {
        autoSkip: false,
        padding: 10, // 增加标签与条形的间距
      },
    },
  },
};

同时给图表容器设置最小高度，保证标签有足够空间：

<div className="flex justify-center bg-white min-h-[600px]">
  {/* 图表内容 */}
</div>

2. 标签自动换行或缩小字体 #

如果间距调整后仍拥挤，可通过自动换行或缩小字体优化：

y: {
  ticks: {
    autoSkip: false,
    padding: 10,
    font: {
      size: 12, // 缩小标签字体
    },
    maxRotation: 0, // 禁止标签旋转，保持水平
    minRotation: 0,
    callback: (value) => {
      const label = value as string;
      // 每6个字符自动换行，可根据需求调整长度
      return label.length > 6 ? label.replace(/(.{6})/g, "$1\n") : label;
    },
  },
}

3. 添加垂直滚动容器 #

若经办人数量极多，给图表容器添加垂直滚动，避免页面过长：

<div className="flex justify-center bg-white overflow-y-auto max-h-[800px]">
  <Bar options={options} ref={ref} data={data} onClick={handleClick} />
</div>

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