Chart.js双堆叠折线图Y轴数值显示异常问题求助

问题根源 #

1. 配置结构错误：你的代码错误地将options嵌套在顶层配置对象内，导致部分配置（如外层的stacked: false）未生效，而scales里的stacked: true被启用，使得Y轴计算两个数据集的总和，显示数值不正确。
2. 堆叠模式局限性：堆叠折线图会累加同X轴位置的数值，Y轴显示的是总和而非单个数据的真实值；关闭堆叠后，数值相同的折线会因坐标完全一致而重叠。

解决方案 #

采用微小数值偏移+修正配置结构的方法：给其中一个数据集的每个数值添加极小增量（如1），让相同数值的折线产生细微错位，同时保持Y轴显示接近真实值，再通过tooltip回调显示原始数值。

修正后的完整代码 #

const yValues1 = [751, 1300, 1700, 1500, 2550, 3634];
const yValues2Original = [750, 2300, 2700, 2890, 2550, 3634];
// 给2023的数据添加微小偏移，避免重叠
const yValues2 = yValues2Original.map(v => v + 1); 

const chartConfig = {
  type: 'line',
  data: {
    labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    datasets: [
      {
        label: '2023',
        data: yValues2,
        originalData: yValues2Original, // 存储原始数据用于tooltip显示
        borderWidth: 2,
        borderColor: '#2196F3',
        pointRadius: 0,
        pointHitRadius: 0,
        pointBackgroundColor: 'transparent'
      },
      {
        label: '2022',
        data: yValues1,
        borderWidth: 2,
        borderColor: '#EF6C00',
        pointRadius: 0,
        pointHitRadius: 0,
        pointBackgroundColor: 'transparent'
      },
    ]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    stacked: false, // 关闭堆叠，确保Y轴显示接近真实的数值
    tension: 0.4,
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        caretPadding: 60,
        backgroundColor: '#fef1ed',
        usePointStyle: false,
        titleColor: 'black',
        displayColors: false,
        titleMarginBottom: 5,
        titleFont: {
          size: 14,
        },
        borderWidth: 1,
        bodyColor: 'black',
        yAlign: 'bottom',
        callbacks: {
          title: (context) => {
            // 优先读取原始数据，确保tooltip显示真实值
            const originalValue = context[0].dataset.originalData 
              ? context[0].dataset.originalData[context[0].dataIndex] 
              : context[0].raw;
            const formattedValueWithSymbol = originalValue.toLocaleString('en-GB', { 
              style: 'currency', 
              currency: 'GBP' 
            });
            return formattedValueWithSymbol;
          },
          label: (tooltipItem) => {
            return '';
          },
        },
      },
      customBalloon: {
        backgroundColor: "#fef1ed",
      }
    },
    scales: {
      x: {
        offset: true, // 保持X轴偏移，不启用堆叠
        ticks: {
          color: '#000000',
          font: {
            weight: (value) => {
              return value.index === 5 ? 'bold' : 'normal';
            }
          },
          padding: 20
        },
        grid: {
          drawOnChartArea: false,
        },
      },
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Values',
        },
        border: {
          display: false
        },
        ticks: {
          stepSize: 750,
        }
      }
    },
    responsive: true,
    maintainAspectRatio: true
  },
  plugins: [customBalloon]
}

// 创建图表
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, chartConfig);

关键修改点 #

1. 修正配置结构：移除嵌套的options，将配置项放在顶层options中，确保所有设置生效。
2. 添加数值偏移：对2023的数据集每个值加1，使相同数值的折线产生细微错位，避免重叠。
3. 存储原始数据：在dataset中添加originalData属性，确保tooltip显示真实数值而非偏移后的值。
4. 关闭堆叠模式：移除scales.x和scales.y的stacked属性，让Y轴显示接近真实的数值（偏移后与原始值几乎无视觉差异）。

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