向 ChartJS 数据点添加逗号

我需要在 ChartJS 图表中的数字中添加逗号。前任。数据点可能是 1032.05、4334.75、8482.46，我需要它显示为 1,032.05、4,334.75、8,482.46。

以下是包含当前代码的开发网站的链接：投资计算器 www.azurewebsites.net http://investingcalculator.azurewebsites.net/

我目前在计算时将值作为数组传递，由于数组是用逗号分隔的，所以我不确定如何将数据点更改为逗号。

我的计算代码如下。请注意，我正在使用要求：

define(['jquery', 'chartjs'], function ($) {

var investCalc = {

    calculate: function () {

        var currentbalance = $("#currentbalance");
        var interestrate = $("#interestrate");
        var yearscontributing = $("#yearscontributing");
        var monthlycontribution = $("#monthlycontribution");

        var year = [];
        var yearlybalance = [];

        $('#calculate').on('click', function () {

            var P = parseFloat(currentbalance.val());
            var r = parseFloat(interestrate.val());
            var t = parseFloat(yearscontributing.val());
            var add = parseFloat(monthlycontribution.val());
            var addtotal = add * 12;
            if (isNaN(P) || isNaN(r) || isNaN(t) || isNaN(add)) {
                alert('All Inputs Must Be Numbers');
                return;
            }



            // Loop to provide the value per year and push them into an array for consumption by the chart
            for (var i = 0; i < t; i++) {
                // Convert int of interest rate to proper decimal (ex. 8 = .08)
                var actualrate = r / 100;
                var A = (P + addtotal) * (1 + actualrate);
                var P = A;

                // Convert the loop from starting at 0 to print the actual year
                startyear = i + 1;
                actualyear = "Year " + startyear;

                // Format the number output to 2 decimal places
                formattedValue = A.toFixed(2);
                endBalance = P.toFixed(2);

                // Push the values in the array
                year.push(actualyear);
                yearlybalance.push(formattedValue);
            }

            $("#endingbalance").val(endBalance);



            // Bar chart
            var barChartData = {
                labels: year,
                datasets: [
                    {
                        label: "Investing Results",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: yearlybalance
                    }
                ]
            }

            var ctx = $("#canvas").get(0).getContext("2d");
            // This will get the first returned node in the jQuery collection.
            newBarChart = new Chart(ctx).Bar(barChartData, {
                responsive: true

            });
            $('#calculate').hide();


            var chartjs = Chart.noConflict();

        });

        // Reset values and page
        $('#reset').on( 'click',  function  () {

            location.reload();

        });
    }
};

 return investCalc;

  });

您可以将“multiTooltipTemplate”或“tooltipTemplate”添加到图表选项中。下面是代码的副本，其中添加了“multiTooltipTemplate”作为选项。我有一个用于添加逗号的小函数，我也在下面包含了它。

newBarChart = new Chart(ctx).Bar(barChartData, {
                responsive: true,
                multiTooltipTemplate: "$<%=addCommas(value)%>"
            });

function addCommas(nStr){

    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;

}

我希望这会有所帮助，我们将它用于 Chart.js 中的工具提示，并且效果很好。