Javascript 向ChartJS数据点添加逗号

我需要在图表中的数字上加逗号。例如，数据点可能是1032.054334.758482.46，我需要它显示为1032.054334.758482.46

以下是指向具有当前代码的开发站点的链接：

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

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

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;

  });

define（['jquery'，'chartjs']，函数（$）{
var investCalc={
计算：函数（）{
var currentbalance=$（“#currentbalance”）；
var利率=$（“#利率”）；
var年贡献=$（“#年贡献”）；
var月贡献=$（“月贡献”）；
var年=[]；
var年度余额=[]；
$（“#计算”）。在（'单击'，函数（）{
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））{
警报（“所有输入必须是数字”）；
返回；
}
//循环以提供每年的值，并将它们放入一个数组中供图表使用
对于（变量i=0；i

我建议在replace函数中使用这个正则表达式来添加逗号。像这样：

endBalance=p.toFixed（2）.替换（/\B（？=（\d{3}）+（？！\d））/g，“，””

您可以在图表选项中添加“MultiToolTiptTemplate”或“ToolTiptTemplate”。下面是添加了“MultiToolTiptTemplate”作为选项的代码副本。我有一个用于添加逗号的小函数，下面也包括了这个函数

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;

}

newBarChart=新图表（ctx）.Bar（barChartData{
回答：是的，
多工具模板：“$”
});
函数addCommas（nStr）{
nStr+=''；
x=nStr.split（'.'）；
x1=x[0]；
x2=x.长度>1？'.+x[1]：''；
var rgx=/（\d+）（\d{3}）/；
while（rgx.测试（x1））{
x1=x1.替换（rgx，'$1'+'，'+'$2'）；
}
返回x1+x2；
}

---

我希望这能有所帮助，我们在Chart.js中使用它作为工具提示，效果很好。

图表上的每个数据点如何。变量是YearlyBalance，我只是举个例子。您可以在任何字符串上使用它

yearlybalance.push（formattedValue.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”）

对endBalance非常有效，但对yearlybalance不起作用，因为它是一个值数组（例如“yearlybalance1，yearlybalance2，等等）因为它有逗号，我相信它会变得混乱，无法呈现图表。好吧，我看到了问题，似乎chart.js不支持像HighCharts那样“开箱即用”的数据格式，这一点我觉得很奇怪。给我几天时间深入研究chart.js源代码，我会看看是否可以编写一个扩展来处理formatting为您提供。我相信它对其他许多人也会有用。我使用了Chart.js一段时间，但它不够灵活，无法满足我的需要，所以我们转向HighCharts。好吧，这真的很奇怪。我花了几个小时在这方面，他们绘制工具提示的方法对我来说非常奇怪。没有办法影响工具提示文本直截了当。每次你将鼠标悬停在某个点上，工具提示就会显示出来，整个图表都会被重新绘制。此外，他们使用的是一个非常奇怪的微型模板，我找不到任何文档。我仍在研究它，但添加逗号似乎不太可能。我确实找到了如何添加其他字符，如度量单位或其他字符美元符号，等等…但不是千位分隔符的逗号。