如何将 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, '' + ',' + '');
    }
    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 中，我认为我无法应用一些简单的通用解决方案，但如果有，那就太好了；否则，有什么方法可以实现这种数值的商品化？

更新

我想试试 felipetcho 的答案，但我不知道该把代码放在我所拥有的代码中的确切位置，也就是：

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

...returns 它恢复到以前的样子，但我仍然没有将值逗号化，当然。

这是我的代码（当上面的代码没有被注释掉时）：

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

等一下 - 我更新了上面最后一张截图而没有真正注意它的外观，它已经被修复了。如前所述，只需添加这一行 felipetcho:

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

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

Answer 1

试试这样的 -

datasets: [
{
    labels: [addCommas(2755), addCommas(2256), addCommas(1637), addCommas(1608)],
    data: [2755, 2256, 1637, 1608],
    . . .

Answer 2

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

...

Answer 3

真正需要的只是 felipetcho 代码的第一行，即：

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

...然后在这之后的某处：

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

即使我在为不同图表声明数据集和数据的其他代码块之后有了最后一个代码，它仍然适用于正在讨论的 chart/data。

就是这样！它很简单。怎么样，我不太理解，但确实如此，所以我很满意。

如何将 Chart.JS 中提供给图表的数据值逗号化？

How to commaize the data values provided to a chart in Chart.JS?

javascript

chart.js

chart.js2

更新

更新 2

更新 3