ChartJS：堆叠的条形图加折线。仅获取堆积条的总数和百分比

Question

我在下面的ChartJS图表中表示了业务目标与成就，以及在线+商店收入。

下面是图表代码：

  var data = [{
        label: 'Target',
        data: [21421, 22145, 15014, 15441],
        type: 'line',
        borderColor: '#004368',
        datalabels: {
            display: false
        }
    }, {
        label: 'Online',
        backgroundColor: 'green',
        data: [6310, 5742, 4044, 5564]
    }, {
        label: 'Store',
        backgroundColor: 'red',
        data: [11542, 12400, 12510, 11450]
    }];

使用chartjs-plugin-datalabels插件，我用下面的代码（作者：https://stackoverflow.com/a/52044118/3725816）显示每个堆叠条形的百分比值：

datalabels: {
            formatter: function (value, ctx) {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
    sum += data;
});
let percentage = (value * 100 / sum).toFixed(0) + "%";
return percentage;
}
        }

我想显示每个栏中达到的“在线+商店”总和的百分比，而忽略“目标值”。此代码的问题是，它显示了所有三个数据集的总和的百分比（目标，已实现存储，已实现在线）。

此外，我还将使用以下代码在工具提示中显示所有标签：

 tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItem, data) { 
var type = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
for (var i = 0; i < data.datasets.length; i++)
    total += data.datasets[i].data[tooltipItem.index];
if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
    return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
} else {
    return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,'), "Achieved: " + total];
}
}
        }
    }

在上面的工具提示中，如何显示已实现的收入值（仅酒吧总数：在线+商店）。

这是JSFiddle（https://jsfiddle.net/kingBethal/2apo3e6x/9/）