ChartJS折线图：多差异值数据集的变化趋势关联追踪需求

要让数值范围差异极大的多数据集折线图按相对变化比例重叠展示（比如[10,11]和[1000,1100]因变化率均为10%而完全重合），核心思路是将每个数据集归一化为相对于初始值的比例，具体实现步骤如下：

1. 编写归一化函数 #

将每个数据集的数值转换为相对于第一个值的比例，确保所有折线起始点统一：

// 归一化函数：以数据集第一个值为基准，转换为相对比例
const normalizeDataset = (data) => {
  const baseValue = data[0];
  if (baseValue === 0) throw new Error('数据集初始值不能为0，无法计算相对比例');
  return data.map(value => value / baseValue);
};

2. 处理原始数据集 #

对示例中的三个数据集进行归一化处理（注意修正原示例中dataset属性为ChartJS标准的data）：

// 原始业务数据集
const averagePurchaseValueDataset = {
  label: 'Average Purchase Value',
  data: [25.50, 28.50, 24.30, 26.40 ]
};

const sessionDurationDataset = {
  label: 'Session Duration',
  data: [80, 120, 90, 85, 93]
};

const averageItemsPurchased = {
  label: 'Average Items Purchased',
  data: [3, 2, 1, 1]
};

// 生成归一化后的数据集数组
const normalizedDatasets = [
  {
    ...averagePurchaseValueDataset,
    data: normalizeDataset(averagePurchaseValueDataset.data)
  },
  {
    ...sessionDurationDataset,
    data: normalizeDataset(sessionDurationDataset.data)
  },
  {
    ...averageItemsPurchased,
    data: normalizeDataset(averageItemsPurchased.data)
  }
];

3. 初始化ChartJS折线图 #

使用归一化后的数据集创建图表，配置Y轴显示百分比、Tooltip同时展示原始值和比例：

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    // 根据实际业务场景替换X轴标签
    labels: ['Period 1', 'Period 2', 'Period 3', 'Period 4', 'Period 5'],
    datasets: normalizedDatasets.map((ds, index) => ({
      ...ds,
      borderColor: ['#FF6384', '#36A2EB', '#FFCE56'][index],
      backgroundColor: 'rgba(0, 0, 0, 0)',
      fill: false,
      tension: 0.1
    }))
  },
  options: {
    scales: {
      y: {
        title: {
          display: true,
          text: 'Relative Change (vs Initial Value)'
        },
        ticks: {
          // 将比例转换为百分比显示
          callback: (value) => `${(value * 100).toFixed(0)}%`
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          // Tooltip同时展示原始数值和相对比例
          label: (context) => {
            const originalValue = context.dataset.data[0] * context.parsed.y;
            return `${context.dataset.label}: ${originalValue.toFixed(2)} (${(context.parsed.y * 100).toFixed(0)}%)`;
          }
        }
      }
    }
  }
});

关键注意点 #

• 若数据集第一个值为0，需调整归一化基准（比如用第一个非零值），避免计算错误
• X轴标签需根据实际数据周期（如日期、时间段）替换，保证业务逻辑匹配
• 可自定义折线颜色、样式，提升图表可读性

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