将逗号添加到ChartJS数据点

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

以下是使用当前代码的开发站点的链接： 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; }); 

Answer 1

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

 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中的工具提示，并且效果很好。

Answer 2

我推荐这个正则表达式在替换函数中添加逗号。像这样：

endBalance = P.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")