Chart.js折线图Y轴线条位置偏移问题求助

使用Chart.js创建柱状图与折线图的混合图表时，折线数据本身正确，但绘制时Y轴位置出现错误聚合。由于柱状图需要将Y轴设置为stacked: true，无法修改该属性。当前黑色折线位置正确，但棕色折线本应位于Y轴23的位置，却显示在41（即23+18）处，需要实现折线按实际数据值正确定位。

const barData = {
    labels: lblList,
    datasets: [
        {
            label: 'GP Hedef',
            backgroundColor: 'rgb(12,0,0)',
            type: 'line',
            borderDash: [10],
            data: mList,
            fill: false,
            borderWidth: 2,
            borderColor: 'rgb(12,0,0)',
            spanGaps: true,
            fullWidth: false
        },
        {
            label: 'MOM Hedef',
            backgroundColor: 'rgba(122, 17, 17, 1)',
            type: 'line',
            borderDash: [10],
            data: hList,
            fill: false,
            borderWidth: 2,
            borderColor: 'rgba(122, 17, 17, 1)',
            spanGaps: true,
            fullWidth: false
        },
        {
            categoryPercentage:0.2, 
            data: gList,
            backgroundColor: cGList,
            maxBarThickness: 12,
            borderWidth: 1,
            label: 'GP',
            stack: 1
        },
        {
            label: 'Process',
            data: pList,
            backgroundColor: cPList,
            borderWidth: 1,
            maxBarThickness: 25,
            stack:2
        },
        {
            label: 'Waiting',
            data: wList,
            backgroundColor: cWList,
            borderWidth: 1,
            maxBarThickness: 25,
            stack:2
        },
        {
            data: tList 
        }
    ]
}

new Chart(ctx0, {
    type: 'bar',
    data: barData,
    options: {
        tooltips: {
            displayColors: false,
            backgroundColor: 'rgb(150, 50, 0)',
            titleFontColor: 'rgb(255, 255, 255)',
            bodyFontColor: 'rgb(255, 255, 255)',
            callbacks: {
                title: function (tooltipItem, data) {
                    return;
                },
                label: function (tooltipItem, data) {
                    const label = data.datasets[tooltipItem.datasetIndex].label;
                    const cycle = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    return label + ': ' + cycle + ' sn';
                }
            }
        },
        legend: {
            display: false
        },
        title: {
            display: true,
            text: 'İstasyon Çevrim Süreleri',
            fontSize: 20
        },
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

问题根源是当Y轴设置为stacked: true时，折线图数据集会默认参与堆叠计算。解决方法是为折线图单独分配一个非堆叠的Y轴，与柱状图的堆叠Y轴分离：

1. 给每个折线数据集添加yAxisID属性，指定专属轴：

{
    label: 'GP Hedef',
    backgroundColor: 'rgb(12,0,0)',
    type: 'line',
    borderDash: [10],
    data: mList,
    fill: false,
    borderWidth: 2,
    borderColor: 'rgb(12,0,0)',
    spanGaps: true,
    fullWidth: false,
    yAxisID: 'y-axis-line' // 添加此行
},
{
    label: 'MOM Hedef',
    backgroundColor: 'rgba(122, 17, 17, 1)',
    type: 'line',
    borderDash: [10],
    data: hList,
    fill: false,
    borderWidth: 2,
    borderColor: 'rgba(122, 17, 17, 1)',
    spanGaps: true,
    fullWidth: false,
    yAxisID: 'y-axis-line' // 添加此行
}

2. 在options.scales中配置两个Y轴：一个保持堆叠给柱状图，另一个设为非堆叠给折线图，同时隐藏折线轴的刻度避免视觉混乱：

scales: {
    xAxes: [{
        stacked: true
    }],
    yAxes: [
        {
            id: 'y-axis-bar', // 柱状图的堆叠Y轴
            stacked: true
        },
        {
            id: 'y-axis-line', // 折线图的非堆叠Y轴
            stacked: false,
            position: 'right', // 可放在右侧，也可设为left与原轴重叠
            gridLines: {
                display: false // 隐藏网格线
            },
            ticks: {
                display: false // 隐藏刻度值
            }
        }
    ]
}

3. 给柱状图数据集指定默认的堆叠Y轴（可选，不指定会默认使用第一个Y轴）：

{
    categoryPercentage:0.2, 
    data: gList,
    backgroundColor: cGList,
    maxBarThickness: 12,
    borderWidth: 1,
    label: 'GP',
    stack: 1,
    yAxisID: 'y-axis-bar' // 添加此行
}
// 其他柱状图数据集同理添加yAxisID: 'y-axis-bar'

修改后，折线图会基于自身数据值定位，不再参与柱状图的堆叠计算，同时柱状图的堆叠效果保持不变。

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