如何使ChartJS堆积的条形图自定义工具提示变成四舍五入？

Question

我已经使用ChartJS和自定义工具提示创建了一个水平堆积的条形图。但是我创建的工具提示与其他ChartJS图表使用的标准工具提示不一样。

例如，正常的工具提示如下所示：

但是目前这是我的自定义工具提示：

图表代码：

var ctx = document.getElementById('currentReleaseManualChart').getContext('2d');    
myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
          datasets: [
            {
              label: "Failed",
              data: [totalFailed],
              backgroundColor: "#af3636"
            },
            {
              label: "Blocked",
              data: [totalBlocked],
              backgroundColor: "#3552aa"
            },
            {
              label: "Passed",
              data: [totalPassed],
              backgroundColor: "#00a65a"
            },
            {
              label: "Tests Left for Execution",
              data: [totalLeft],
              backgroundColor: "#5f5d60"
            }
          ]
        },
        options: {
          maintainAspectRatio: false,
          responsive: true,
          animation: {
            easing : 'linear'
          },
          tooltips: {
              // Disable the on-canvas tooltip
              enabled: false,
              mode: 'dataset',
              //position: 'nearest',
              custom: customTooltips
              //intersect: true,
          },
          scales: {
            xAxes: [{
              display: true,
              stacked: true,
              ticks: {
                beginAtZero: true,
                min: 0,
                suggestedMax: totalTests,
                //max: totalTests
                stepSize: 100
              },
            }],
            yAxes: [{
              display: false,
              stacked: true,
              barThickness: 40.0
            }]
          },
          legend: {
            display: false
          },
          layout: {
            padding: {
              right: 50,
              left: 50
            }
          }
        }
    });

自定义工具提示：

var customTooltips = function(tooltip) {
    // Tooltip Element
    var tooltipEl = document.getElementById('chartjs-tooltip-manual');

    // Create element on first render
    if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip-manual';
        tooltipEl.innerHTML = '<table></table>';
        document.body.appendChild(tooltipEl);
    }

    // Hide if no tooltip
    if (tooltip.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
    }

    // Set caret Position
    tooltipEl.classList.remove('above', 'below', 'no-transform');
    if (tooltip.yAlign) {
        tooltipEl.classList.add(tooltip.yAlign);
    } else {
        tooltipEl.classList.add('no-transform');
    }

    function getBody(bodyItem) {
        return bodyItem.lines;
    }

    // Set Text
    if (tooltip.body) {
        var titleLines = [];
        var result = tooltip.body.map(getBody);
        var output = result[0][0].toString();
        var splitData = output.split(':');
        var passedOrFailed = splitData[0];
        var bodyLines = [];
        var arrayLength = manualData.length;
        if (passedOrFailed == "Passed"){
         title = "Passed Test Cases";
        for (var i = 0; i < arrayLength; i++) {
           var bodyString = partners[i] + " : " + manualData[i].totalPassed;
           bodyLines[i] = bodyString;
          }
        }else if (passedOrFailed == "Failed"){
         title = "Failed Test Cases";
        for (var i = 0; i < arrayLength; i++) {
           var bodyString = partners[i] + " : " + manualData[i].totalFailed;
           bodyLines[i] = bodyString;
          }
        }else if (passedOrFailed == "Blocked"){
         title = "Blocked Test Cases";
        for (var i = 0; i < arrayLength; i++) {
           var bodyString = partners[i] + " : " + manualData[i].totalBlocked;
           bodyLines[i] = bodyString;
          }
        }else{
         title = "Test Cases Left To Execute";
        for (var i = 0; i < arrayLength; i++) {
           var bodyString = partners[i] + " : " + manualData[i].testsLeft;
           bodyLines[i] = bodyString;
          }
        }

        var innerHtml = '<thead>';
        innerHtml += '<tr><th>' + title + '</th></tr>';
        innerHtml += '</thead><tbody>';


        var colors = tooltip.labelColors[0];
        bodyLines.forEach(function(body, i) {
            var style = 'background:' + colors.backgroundColor;
            style += '; border-color:' + colors.borderColor;
            style += '; border-width: 2px';
            var span = '<span style="' + style + '"></span>';
            innerHtml += '<tr><td>' + span + body + '</td></tr>';
            //innerHtml += '<tr><td>' + body + '</td></tr>';
        });
        innerHtml += '</tbody>';

        var tableRoot = tooltipEl.querySelector('table');
        tableRoot.innerHTML = innerHtml;
    }

    // `this` will be the overall tooltip
    var position = this._chart.canvas.getBoundingClientRect();

    // Display, position, and set styles for font
    tooltipEl.style.opacity = 1;
    tooltipEl.style.position = 'absolute';
    tooltipEl.style.border = "1px solid #000000";
    tooltipEl.style.backgroundColor = "#FFFFFF";
    tooltipEl.style.color = "#4C4F59";
    //tooltipEl.style.backgroundColor = colors.backgroundColor;
     if (passedOrFailed == "Tests Left for Execution"){
       tooltipEl.style.left = (position.left/2) + window.pageXOffset + tooltip.caretX + 'px';
     }else{
       tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
     }
    tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
    tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
    tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
    tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    tooltipEl.style.pointerEvents = 'none';
}