如何在ChartJS/react-chartjs-2中合理缩放悬殊数值的水平柱状图

针对数据集中存在极大值和极小值导致小柱子几乎不可见的情况，提供三种实用解决方案：

1. 使用对数刻度 #

对数刻度能压缩大数值的比例，放大小数值的显示效果，同时通过格式化刻度和提示框保证可读性。

修改options中的scales配置：

export const options = {
  indexAxis: "y" as const,
  elements: {
    bar: {
      borderWidth: 2
    }
  },
  responsive: true,
  plugins: {
    legend: {
      position: "right" as const
    },
    title: {
      display: true,
      text: "Chart.js Horizontal Bar Chart (Logarithmic Scale)"
    },
    tooltip: {
      callbacks: {
        label: (context) => `Value: ${context.parsed.x.toLocaleString()}`
      }
    }
  },
  scales: {
    x: {
      type: 'logarithmic', // 启用对数刻度
      ticks: {
        callback: (value) => {
          const num = Number(value);
          if (num >= 1e9) return `${(num / 1e9).toFixed(0)}B`;
          if (num >= 1e6) return `${(num / 1e6).toFixed(0)}M`;
          return num.toLocaleString();
        }
      }
    }
  }
};

• 对数轴会自动调整比例，让小数值柱子清晰显示；
• 刻度和提示框用易读的格式（如10B表示10亿）替代科学计数法。

2. 截断X轴并标注真实值 #

如果需要保持线性比例，可将X轴上限设为接近小数值的最大值，同时给大数值柱子添加标注说明真实数据。

修改options（需安装chartjs-plugin-annotation插件支持标注）：

export const options = {
  indexAxis: "y" as const,
  elements: {
    bar: {
      borderWidth: 2
    }
  },
  responsive: true,
  plugins: {
    legend: {
      position: "right" as const
    },
    title: {
      display: true,
      text: "Chart.js Horizontal Bar Chart (Truncated Scale)"
    },
    annotation: {
      annotations: {
        januaryLabel: {
          type: 'text',
          xValue: 3500000000,
          yValue: 0,
          content: '440B',
          font: { size: 14, weight: 'bold' }
        }
      }
    },
    tooltip: {
      callbacks: {
        label: (context) => `Value: ${context.parsed.x.toLocaleString()}`
      }
    }
  },
  scales: {
    x: {
      max: 3200000000, // 设为略大于最大的小数值（30亿）
      ticks: {
        callback: (value) => {
          const num = Number(value);
          return num >= 1e9 ? `${(num / 1e9).toFixed(1)}B` : num.toLocaleString();
        }
      }
    }
  }
};

• 小数值柱子按正常线性比例显示；
• 大数值柱子被截断到X轴上限，通过标注明确真实值。

3. 使用双X轴拆分数据集 #

将极大值和小数值分成两个数据集，分别绑定到顶部和底部的X轴，各自使用适配的刻度范围。

修改data和options：

export const data = {
  labels: ["January", "February", "March", "April"],
  datasets: [
    {
      label: "Large Values",
      data: [440000000000, null, null, null],
      borderColor: "rgb(255, 99, 132)",
      backgroundColor: "rgba(255, 99, 132, 0.5)",
      xAxisID: 'x1'
    },
    {
      label: "Small Values",
      data: [null, 3000000000, 1000000000, 880147000],
      borderColor: "rgb(54, 162, 235)",
      backgroundColor: "rgba(54, 162, 235, 0.5)",
      xAxisID: 'x2'
    }
  ]
};

export const options = {
  indexAxis: "y" as const,
  elements: {
    bar: {
      borderWidth: 2
    }
  },
  responsive: true,
  plugins: {
    legend: {
      position: "right" as const
    },
    title: {
      display: true,
      text: "Chart.js Horizontal Bar Chart (Dual X-Axes)"
    },
    tooltip: {
      callbacks: {
        label: (context) => `${context.dataset.label}: ${context.parsed.x?.toLocaleString() || 'N/A'}`
      }
    }
  },
  scales: {
    x1: {
      position: 'top',
      ticks: {
        callback: (value) => `${(Number(value) / 1e11).toFixed(1)}×100B`
      },
      max: 500000000000
    },
    x2: {
      position: 'bottom',
      ticks: {
        callback: (value) => `${(Number(value) / 1e9).toFixed(1)}B`
      },
      max: 3500000000
    }
  }
};

• 两组数据互不干扰，各自的刻度范围适配自身数值；
• 顶部轴展示极大值，底部轴展示小数值，所有柱子都能清晰显示。

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