Chart.js双数据集柱状图缩放优化：提升对比效果的配置方案

针对两个数据集量级差异大导致可视化对比困难的问题，可以通过以下核心方式解决：

1. 明确绑定数据集到对应Y轴 #

首先要确保每个数据集绑定到你已定义的独立Y轴，避免Chart.js自动统一缩放。在数据集配置中添加yAxisID属性，对应左侧y轴和右侧y1轴：

datasets: [
  {
    label: '蓝色数据集',
    data: [/* 你的数据 */],
    backgroundColor: '#4285F4',
    yAxisID: 'y' // 绑定左侧Y轴
  },
  {
    label: '紫色数据集',
    data: [/* 你的数据 */],
    backgroundColor: '#A855F7',
    yAxisID: 'y1' // 绑定右侧Y轴
  }
]

2. 对数据集做归一化处理（核心解决趋势对比） #

为让两个数据集起点对齐、趋势清晰，对量级较大的数据集做归一化，同时保留原始数据用于展示真实数值：

• 提取两个数据集的初始值（第一个数据点）：假设蓝色初始值为blueInitial，紫色初始值为purpleInitial
• 将紫色数据集的每个值转换为：normalizedValue = (purpleValue / purpleInitial) * blueInitial
• 把原始数据存入数据集的自定义属性，用于tooltip展示

示例代码：

// 原始数据
const blueData = [10, 20, 30, 40, 50];
const purpleRawData = [5, 60, 80, 100, 130];
const blueInitial = blueData[0];
const purpleInitial = purpleRawData[0];

// 归一化紫色数据
const purpleNormalizedData = purpleRawData.map(val => (val / purpleInitial) * blueInitial);

// 图表数据集配置
datasets: [
  {
    label: '蓝色数据集',
    data: blueData,
    backgroundColor: '#4285F4',
    yAxisID: 'y'
  },
  {
    label: '紫色数据集',
    data: purpleNormalizedData,
    backgroundColor: '#A855F7',
    yAxisID: 'y1',
    rawData: purpleRawData // 存储原始数据用于tooltip
  }
]

// 自定义tooltip显示原始数值
options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: ctx => {
          const label = ctx.dataset.label + ': ';
          if (ctx.dataset.yAxisID === 'y1') {
            return `${label}${ctx.raw.toFixed(1)} (原始值: ${ctx.dataset.rawData[ctx.dataIndex]})`;
          }
          return `${label}${ctx.raw}`;
        }
      }
    }
  },
  // 沿用你现有的Y轴配置，可优化右侧刻度
  scales: {
    y: {
      beginAtZero: true,
      grid: { display: false, drawBorder: false, drawOnChartArea: false },
      ticks: { display: true }
    },
    y1: {
      beginAtZero: true,
      position: 'right',
      grid: { display: false, drawBorder: false, drawOnChartArea: false },
      ticks: { 
        display: true,
        // 可选：让右侧刻度直接对应紫色原始数据量级
        callback: val => (val / blueInitial) * purpleInitial
      }
    }
  }
}

3. 可选优化：右侧Y轴刻度映射原始数据 #

在y1轴的ticks.callback中，将归一化后的刻度值转换回原始数据量级，让右侧刻度直接显示紫色数据集的真实数值范围，进一步提升可读性。

这样配置后，两个数据集起点对齐、趋势对比清晰，同时通过tooltip和右侧刻度可获取真实数据，匹配你想要的预期效果。

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