将逗号添加到 ChartJS 数据点

2022-01-22 00:00:00 jquery javascript chart.js

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

I need to add commas to numbers in a ChartJS graph. Ex. Data points might be 1032.05, 4334.75, 8482.46 and I need it to display as 1,032.05, 4,334.75, 8,482.46.

这里是带有当前代码的开发站点的链接:http://investingcalculator.azurewebsites.net/

Here is the link to a development site with current code: http://investingcalculator.azurewebsites.net/

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

I am currently passing in the values as an array on calculate and since arrays are comma delimitated, I am not sure how to change the data points to have commas.

我的计算代码如下.请注意，我使用的是 requires:

My calculate code is as follows. Please note that I am using requires:

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"作为选项.我有一个用于添加逗号的小功能，我也将其包含在下面.

You can add "multiTooltipTemplate" or "tooltipTemplate" to your chart options. Below is a copy of your code with "multiTooltipTemplate" added as an option. I have a small function that I use to add commas, I've included that below also. 

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

I hope this helps, we use it for our tooltips in Chart.js and it works great.

相关文章