javascript - 如何在 Chart.JS 中对提供给图表的数据值进行逗号化？

Question

我有这段代码可以将数据添加到图表中:

datasets: [
    {
        data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
        . . .

我希望它被逗号化，以便“2755”显示为“2,755”等。所以我尝试了这个::

datasets: [
    {
        data: [addCommas(2755), addCommas(2256), addCommas(1637), addCommas(1608), addCommas(1603), addCommas(1433), addCommas(1207), addCommas(1076), addCommas(1056), addCommas(1048)],
        . . .

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;
}

...但这几乎完全抹去了我的馅饼；虽然我添加的图例是可见的，但馅饼本身是不可见的。

这会失败并产生完全相同的效果:

data: ["2,755", "2,256", "1,637", "1,608", "1,603", "1,433", "1,207", "1,076", "1,056", "1,048"],

由于数据嵌入在 Canvas 中，我认为我无法应用一些简单的通用解决方案，但如果有，那就太好了；否则，有什么方法可以实现数值的逗号化？

更新

我想尝试 felipeptcho 的答案，但我不知道该代码到底放在我所拥有的内容中的什么位置，即:

var formatter = new Intl.NumberFormat("en-US");
var data = {
    labels: [
        "Bananas (18%)",
        "Lettuce, Romaine (14%)",
        "Melons, Watermelon (10%)",
        "Pineapple (10%)",
        "Berries (10%)",
        "Lettuce, Spring Mix (9%)",
        "Broccoli (8%)",
        "Melons, Honeydew (7%)",
        "Grapes (7%)",
        "Melons, Cantaloupe (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ]
        }]
};

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

更新2

仍然无法正常工作；添加该代码后的样子如下:

这就是没有新代码时的样子，悬停在香蕉上(显示“2755”，我希望是“2,755”):

简单地注释掉这一点:

data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

...将其返回到之前的外观，但当然，我仍然没有将值逗号化。

这是我的代码，它打破了这个局面(当上面的代码没有被注释掉时):

var formatter = new Intl.NumberFormat("en-US");
var data = {
    labels: [
        "Bananas (18%)",
        "Lettuce, Romaine (14%)",
        "Melons, Watermelon (10%)",
        "Pineapple (10%)",
        "Berries (10%)",
        "Lettuce, Spring Mix (9%)",
        "Broccoli (8%)",
        "Melons, Honeydew (7%)",
        "Grapes (7%)",
        "Melons, Cantaloupe (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ]
        }
    ]
};
data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

更新3

等一下 - 我更新了上面的最后一个屏幕截图，但没有真正注意它的外观，它已经被修复了。正如 felipeptcho 所提到的，所需要的只是添加这一行:

var formatter = new Intl.NumberFormat("en-US");

没有它，值不包含逗号；有了它，他们就可以做到 - 不需要其他任何东西!

Answer 1

var formatter = new Intl.NumberFormat();
var data = {labels: ["..."], datasets: [{data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048], backgroundColor: ["..."]}]};

data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

// Output: {"labels":["..."],"datasets":[{"data":["2,755","2,256","1,637","1,608","1,603","1,433","1,207","1,076","1,056","1,048"],"backgroundColor":["..."]}]}
console.log(data);

另一种方法是实现标签回调:

...

var formatter = new Intl.NumberFormat();

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true,
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return data.labels[tooltipItem.index] + ": " +
                    formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
            }
        }
    }
};

...

var top10PieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: optionsPie
});

...