Javascript 在Chart.js的堆叠条形图中显示百分比和总数

我正在使用chart.js制作堆叠条形图。 我需要显示标签在酒吧中间的百分比和总金额在酒吧顶部堆叠在一起。目前，我能够在搜索代码后显示它们的百分比。但这个百分比在数学上是不正确的。我已经在js fiddle中添加了该代码。希望我能得到一些帮助。我只是js很弱。

HTML-

var数据=[{
标签：“新”，
背景颜色：“#1d3f74”，
数据：[631057440445564]
}, {
标签：'重复'，
背景颜色：“#6c92c8”，
数据：[11542124001251011450]
}];
变量选项={
MaintaintAspectRatio:false，
斯潘：错，
回答：是的，
图例：{
显示：对，
位置：'底部'，
标签：{
fontColor:#fff“，
箱宽：14，
fontFamily:“proximanova”
}
},
工具提示：{
模式：“标签”，
回调：{
标签：函数（工具提示项、数据）{
var type=data.datasets[tooltipItem.datasetIndex].label；
var value=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；
var合计=0；
对于（var i=0；i{
总和+=数据；
});
让百分比=（值*100/和）.toFixed（0）+“%”；
回报率；
},
字体：{
重量：“正常”
},
颜色：“fff”
}
},
比例：{
xAxes：[{
对,，
网格线：{
显示：假
},
滴答声：{
fontColor:#fff”
}
}],
雅克斯：[{
对,，
显示：假，
滴答声：{
fontColor:#fff”
}
}]
}
};
var ctx=document.getElementById（“mychart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“六月”、“七月”、“八月”、“九月”]，
数据集：数据
},
选项：选项
});

您可以设置适用于以下各项的选项：

图表中的所有标签：

options.plugins.datalabels.*

只有一个数据集：

dataset.datalabels.*

//标签格式化程序函数
常量格式化程序=（值，ctx）=>{
const otherDatasetIndex=ctx.datasetIndex==0？1:0；
常量总计=
ctx.chart.data.datasets[otherDatasetIndex].data[ctx.dataIndex]+值；
返回`${（value/total*100）.toFixed（0）}%`；
};
常数数据=[{
//堆栈：“测试”，
标签：“新”，
背景色：“1d3f74”，
数据：[631057440445564]，
//仅更改此数据集标签的选项
数据标签：{
颜色：“白色”，
格式化程序：格式化程序
}
},
{
//堆栈：“测试”，
标签：“重复”，
背景颜色：“6c92c8”，
数据：[11542124001251011450]，
//仅更改此数据集标签的选项
数据标签：{
颜色：“黄色”，
格式化程序：格式化程序
}
}
];
常量选项={
MaintaintAspectRatio:false，
斯潘：错，
回答：是的，
图例：{
显示：对，
位置：“底部”，
标签：{
fontColor:#fff“，
箱宽：14，
fontFamily：“proximanova”
}
},
工具提示：{
模式：“标签”，
回调：{
标签：函数（工具提示项、数据）{
const type=data.datasets[tooltipItem.datasetIndex].label；
常数值=
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；
设total=0；
for（设i=0；i
正文{
背景：#20262e；
字体系列：Helvetica；
填充顶部：50px；
}
#我的图表{
他
  var data = [{
     label: 'New',
     backgroundColor: '#1d3f74',
     data: [6310, 5742, 4044, 5564]
        }, {
     label: 'Repeat',
     backgroundColor: '#6c92c8',
     data: [11542, 12400, 12510, 11450]
        }];


 var options = {
     maintainAspectRatio: false,
     spanGaps: false,
     responsive: true,
     legend: {
         display: true,
         position: 'bottom',
         labels: {
             fontColor: "#fff",
             boxWidth: 14,
             fontFamily: 'proximanova'
         }
     },
     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,'), "Overall : " + total];
                 }
             }
         }
     },
     plugins: {
         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;
             },
             font: {
                 weight: "normal"
             },
             color: "#fff"
         }
     },
     scales: {
         xAxes: [{
             stacked: true,
             gridLines: {
                 display: false
             },
             ticks: {
                 fontColor: "#fff"
             }
                }],
         yAxes: [{
             stacked: true,
             display: false,
             ticks: {
                 fontColor: "#fff"
             }
                }]
     }

 };

 var ctx = document.getElementById("mychart").getContext('2d');

 var myChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: ["Jun", "July", "Aug", "Sept"],
         datasets: data
     },
     options: options
 });